Logical Properties in CSS

Last Updated : 07 Jan, 2025

CSS logical properties use the terms block and inline to define the direction of the writing flow.

Block Properties: Control vertical flow (e.g., top/bottom margins, padding) in horizontal writing modes.
Inline Properties: Control horizontal flow (e.g., left/right margins, padding) in horizontal writing modes.

Syntax:

.element {
    margin-block: 10px;  /* Top and bottom margins */
    padding-inline: 20px; /* Left and right padding */
}

margin-block: Sets the top and bottom margins.
padding-inline: Sets the left and right padding.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            margin-block: 10px;
            padding-inline: 15px;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box">This is a box with logical properties.</div>
</body>
</html>

<!--Driver Code Ends }-->

margin-block: Sets top and bottom margins.
padding-inline: Sets left and right padding.

Mapping Logical Properties to Physical Equivalents

Here is a list of CSS logical properties and their physical equivalents:

Logical Property	Physical Equivalent
inline-size	`width`
max-inline-size	`max-width`
min-inline-size	`min-width`
block-size	`height`
max-block-size	`max-height`
min-block-size	`min-height`
border-block-start	`border-top`
`border-block-end`	`border-bottom`
`border-inline-start`	`border-left`
border-inline-end	`border-right`
margin-block-start	`margin-top`
margin-block-end	`margin-bottom`
margin-inline-start	`margin-left`
margin-inline-end	`margin-right`
inset-block-start	`top`
inset-block-end	`bottom`
inset-inline-start	`left`
inset-inline-end	`right`

More Examples of CSS Logical Properties

Adding Borders Using Logical Properties

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .border-example {
            border-block-start: 2px solid blue;
            border-inline-end: 2px solid orange;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="border-example">
        Logical Properties: Flexible Borders for Different Writing Modes
    </div>
</body>
</html>

<!--Driver Code Ends }-->

border-block-start: Adds a blue border to the block’s start side.
border-inline-end: Adds an orange border to the inline’s end side.

Logical Values with Advanced Styles

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .logical-styled-box {
            margin-block: 20px;
            padding-inline: 15px;
            border-block: 3px dashed red;
            border-inline: 2px solid blue;
            text-align: start;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="logical-styled-box">
        Advanced Logical Styles: Responsive Borders, Padding, and Alignment
    </div>
</body>
</html>

<!--Driver Code Ends }-->

margin-block: Adds vertical spacing (top and bottom margins).
padding-inline: Adds horizontal padding (left and right).
border-block: Adds dashed red borders at block-start and block-end.
border-inline: Adds solid blue borders at inline-start and inline-end.

Best Practices for Using CSS Logical Properties

Use logical properties to make layouts adapt to different writing modes, enhancing responsiveness.
Replace directional properties (e.g., top, left) with logical ones for better flexibility.
Always test your layout in various writing modes to ensure consistency across languages.
Combine logical properties with media queries for optimized designs on diverse devices.

Svelte Nesting Components

harsh464565

Improve

Article Tags :

Logical Properties in CSS

Mapping Logical Properties to Physical Equivalents

Adding Borders Using Logical Properties

Logical Values with Advanced Styles

Best Practices for Using CSS Logical Properties

Similar Reads

Thank You!

What kind of Experience do you want to share?