Best Practices for Using CSS Mappings for Margins, Borders, and Padding
CSS Mappings for Margins, Borders, and Padding
Understanding how CSS maps logical values to physical properties is essential for responsive and multilingual web design. The module below details mappings for each logical value to a physical counterpart.
CSS provides logical properties to accommodate different writing modes, ensuring that margins, borders, and padding adjust dynamically based on text direction and layout.
When using the default horizontal-tb
writing mode (left-to-right direction), the inline direction runs horizontally from left to right. In this case:
margin-inline-start
→ margin-left
margin-inline-end
→ margin-right
padding-inline-start
→ padding-left
padding-inline-end
→ padding-right
border-inline-start
→ border-left
border-inline-end
→ border-right
For languages like Arabic and Hebrew that use right-to-left text direction:
margin-inline-start
→ margin-right
margin-inline-end
→ margin-left
In vertical writing mode (vertical-rl
or vertical-lr
):
margin-inline-start
→ margin-top
margin-inline-end
→ margin-bottom
div {
writing-mode: horizontal-tb;
margin-inline-start: 20px;
padding-inline-end: 15px;
border-inline-start: 2px solid #000;
}
By adjusting writing-mode
, the values automatically map to the appropriate physical properties.
Understanding logical property mappings in CSS helps create more adaptable layouts. Implementing margin-inline-start
, border-inline-start
, and similar properties ensures flexibility across different writing modes.