margin, padding, border-width, border-style and border-color take one to four values clockwise from the top: padding: 10px 20px means 10px top and bottom, 20px left and right. Percentages in margin and padding resolve against the containing block's width, even vertically. Margins may be negative or auto (margin-inline: auto centers a sized block). A border needs a style to show: border: 1px solid #90a4ae. outline draws a line that takes no space, ideal for focus rings.
Margin collapsing trips up everyone once: vertical margins of adjacent blocks merge into the larger of the two, and a first child's top margin can escape through a parent with no border or padding. Margins never collapse in flex and grid containers, on floats or absolutely positioned boxes, or through a parent with display: flow-root.
Logical properties replace top, right, bottom and left with block (the direction lines stack) and inline (the direction text runs), so a margin-inline-start indent sits on the left in English and on the right in Arabic, and one stylesheet serves both; prefer them in new components. They have been Baseline widely available since 2024.
| Physical property (English) | Logical equivalent |
|---|---|
| margin-top, margin-bottom | margin-block-start, margin-block-end |
| padding-left + padding-right | padding-inline |
| width, height | inline-size, block-size |
| top, left | inset-block-start, inset-inline-start |
| border-top-left-radius | border-start-start-radius |