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.

Logical vs. Physical Properties in CSS

CSS provides logical properties to accommodate different writing modes, ensuring that margins, borders, and padding adjust dynamically based on text direction and layout.

Writing Modes and Mappings

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

Right-to-Left (RTL) Mode

For languages like Arabic and Hebrew that use right-to-left text direction:

• margin-inline-start → margin-right
• margin-inline-end → margin-left

Vertical Writing Mode

In vertical writing mode (vertical-rl or vertical-lr):

• margin-inline-start → margin-top
• margin-inline-end → margin-bottom

CSS Example for Logical Properties

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.

Why Use Logical Properties?

• Flexibility for Multiple Languages: Adapts to different text directions.
• Better Maintainability: Avoids the need for separate stylesheets for RTL languages.
• Future-Proof Layouts: Works well with modern responsive design techniques.

Conclusion

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.