Logical properties
Learn logical properties like margin-inline, padding-block.
What are logical properties?
Logical properties work against the flow axes of text instead of physical sides. margin-left always targets the left edge; margin-inline-start targets the edge where text starts.
This matters when the page is direction: rtl or writing-mode: vertical-rl. Logical declarations land on the right spot even when direction flips; you write once, not twice.
margin-inline-start and -end
margin-inline-start adds margin on the inline axis at the edge where text starts. In left-to-right languages like Turkish, that is the left edge; in right-to-left languages like Arabic, it becomes the right edge. Same rule, the edge follows the direction.
margin-inline-end targets the edge where the line ends. To shorten both, write margin-inline: one value applies to both edges, two values apply to start and end in order.
The margin-inline and padding-block shorthand
margin-inline and padding-block are shorthands. margin-inline: 1rem 2rem sets the start edge to 1rem and the end edge to 2rem. padding-block: 1rem applies 1rem to both edges of the block axis.
Value order follows axes, not physical sides. So the designer does more with less; the same file keeps working when direction changes.
Exercise RTL-friendly card margins
Write a margin-inline declaration on the .card selector. Use 1rem 2rem as the value: 1rem at the start, 2rem at the end. Add padding-block: 1.5rem in the same block.
Show example solution
/* card margins direction-agnostic */
.card {
margin-inline: 1rem 2rem;
padding-block: 1.5rem;
}Test yourself
-
Which one is a logical property?
- margin-left
- padding-top
- margin-inline-start
- left: 10px
Show answer
margin-inline-start — Correct. margin-inline-start is logical; it targets the edge where text starts.
-
Padding on the block axis
.card { ____: 2rem; }Show answer
.card { padding-block: 2rem; } -
Match each physical property to its logical pair
- margin-left (LTR)
- margin-inline-start (LTR)
- margin-right (LTR)
- margin-inline-end (LTR)
- padding-top (TB)
- padding-block-start (TB)
- padding-bottom (TB)
- padding-block-end (TB)