Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Logical Properties in CSS
In CSS, logical properties allow developers to define styles based on the logical structure of the web page rather than the physical layout. This means you can apply CSS according to text direction or content flow, making your designs more adaptable to different languages and writing modes.
Logical properties are primarily used to set HTML element's margin, padding, and border. They provide different variants of traditional margin, padding, and border properties that adapt to content flow direction.
Syntax
selector {
property-block-start: value;
property-inline-end: value;
property-block: value;
property-inline: value;
}
Block and Inline Dimensions
Logical properties are defined according to block and inline dimensions
Block dimension Represents the perpendicular direction to content flow. In English (left-to-right text), block dimensions handle the top and bottom of elements.
Inline dimension Represents the same direction as content flow. For English, left and right are inline dimensions.
Common Logical Properties
| Logical Property | Equivalent Physical Property | Description |
|---|---|---|
border-block |
border-top, border-bottom |
Sets top and bottom border |
border-inline |
border-left, border-right |
Sets left and right border |
margin-inline |
margin-left, margin-right |
Sets left and right margins |
padding-block-start |
padding-top |
Sets top padding |
padding-inline-end |
padding-right |
Sets right padding |
Example 1: Margin and Padding Logical Properties
The following example demonstrates logical properties for margins and padding
<!DOCTYPE html>
<html>
<head>
<style>
.text {
padding-block-start: 20px;
padding-inline-start: 30px;
margin-block-end: 50px;
color: green;
background-color: red;
width: 300px;
font-size: 1.5rem;
}
.text1 {
width: 300px;
font-size: 1.5rem;
padding-block-start: 20px;
padding-inline-start: 10px;
margin-inline-end: 50px;
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<h3>Using margins and paddings logical properties in CSS</h3>
<div class="text">This is a text.</div>
<div class="text1">This is another text div element.</div>
</body>
</html>
Two colored boxes appear with different spacing. The first box (red background) has top padding, left padding, and bottom margin. The second box (yellow background) has top padding, left padding, and right margin.
Example 2: Border Logical Properties
This example shows logical border properties for different sides
<!DOCTYPE html>
<html>
<head>
<style>
.sample {
border-block-start: 3px dotted blue;
border-block-end: 5px solid green;
border-inline-start: 10px double red;
border-inline-end: 5px groove yellow;
padding: 10px;
width: 300px;
height: 150px;
margin: 20px auto;
}
.left { color: red; }
.right { color: orange; }
.top { color: blue; }
.bottom { color: green; }
</style>
</head>
<body>
<h3>Using logical border properties in CSS</h3>
<div class="sample">
Observe the different borders:
<p class="left">Left: border-inline-start</p>
<p class="right">Right: border-inline-end</p>
<p class="top">Top: border-block-start</p>
<p class="bottom">Bottom: border-block-end</p>
</div>
</body>
</html>
A box with four different colored borders appears: blue dotted top border, green solid bottom border, thick red double left border, and yellow grooved right border.
Example 3: Logical Properties with Flexbox
Here's how logical properties work within a flexbox layout
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
padding-inline: 40px;
padding-block: 20px;
width: 500px;
background-color: bisque;
font-size: 1.2rem;
border: 2px solid #333;
}
.item {
background-color: lightblue;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Using padding-inline property in flexbox</h3>
<div class="container">
<div class="item">First</div>
<div class="item">Second</div>
<div class="item">Third</div>
</div>
</body>
</html>
A flexbox container with beige background shows three light blue items evenly spaced. The container has horizontal padding (padding-inline) creating space on left and right sides.
Conclusion
Logical properties provide a modern approach to CSS styling that adapts to different writing modes and text directions. They make your designs more international-friendly and maintainable by focusing on content flow rather than fixed physical directions.
346 Views
