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.
<!--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
<!--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
<!--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.