Spacing
Padding and margin on every side, both axes and logical directions.
Sides and axes#
Padding | Margin | |
|---|---|---|
all |
|
|
top · right · bottom · left |
|
|
horizontal · vertical |
|
|
logical inline (start/end) |
|
|
logical block (start/end) |
|
|
Values are standard CSS: p=16px, p=8px 16px, m=0 auto, mt=-4px, p=$space.md.
<div nib="d=flex; g=12px; ali=flex-start">
<div nib="p=24px; bgc=#EEEFFE; cl=#312e81; bdrd=8px; fts=12px">p=24px</div>
<div nib="px=24px; py=8px; bgc=#ecfeff; cl=#155e75; bdrd=8px; fts=12px">px=24px; py=8px</div>
</div>Logical properties and RTL#
mis / mie (margin-inline-start/end) follow the writing direction, so layouts mirror automatically
in right-to-left languages. Prefer them over ml / mr in multilingual products. See RTL.
Gap instead of margins#
Inside flex and grid containers, g spaces children without margins on each child — no
"last item" exception needed.
All spacing shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|