Browse CSS

Spacing

Keep related content and separate groups spaced consistently.

Spacing scale

Replace * in the class families below with 0, sm, md, lg, or xl. Values scale with --space; the defaults below assume 24px.

Class	Behavior
`0`	No spacing.
`sm`	One third of the token: 8px.
`md`	Two thirds: 16px.
`lg`	The full token: 24px.
`xl`	Four thirds: 32px.

Padding and margins

Class	Behavior
`p-*`	Padding on all sides.
`m-*`	Margin on all sides.
`px-*`	Padding on the inline axis: left and right in horizontal writing.
`mx-*`	Margin on the inline axis: left and right in horizontal writing.
`py-*`	Padding on the block axis: above and below in horizontal writing.
`my-*`	Margin on the block axis: above and below in horizontal writing.
`ps-*`	Padding at inline start: left in LTR, right in RTL.
`ms-*`	Margin at inline start: left in LTR, right in RTL.
`pe-*`	Padding at inline end: right in LTR, left in RTL.
`me-*`	Margin at inline end: right in LTR, left in RTL.
`pt-*`	Padding at block start: above in horizontal writing.
`mt-*`	Margin at block start: above in horizontal writing.
`pb-*`	Padding at block end: below in horizontal writing.
`mb-*`	Margin at block end: below in horizontal writing.
`m-auto`	Automatic margins on all sides.
`mx-auto`	Automatic margins on the inline axis.
`my-auto`	Automatic margins on the block axis.
`ms-auto`	Automatic margin at inline start.
`me-auto`	Automatic margin at inline end.
`mt-auto`	Automatic margin at block start.
`mb-auto`	Automatic margin at block end.

Combine broad and narrow utilities, such as p-lg px-md. Axis utilities override all-side spacing; individual edges override the axis. Class order in your HTML does not change this precedence. Choose one value per property.

Gaps

Class	Behavior
`gap-*`	Both row and column gaps.
`gap-x-*`	Column gap.
`gap-y-*`	Row gap.

Use gaps on a stack, cluster or grid. Gaps separate children without adding spacing around the container.

Card density

Compact

A concise card with medium padding and gaps.

Comfortable

More breathing room using the same theme scale.

<article class="panel stack p-md gap-md">
  <h3 class="m-0">Compact</h3>
  <p class="m-0 muted">A concise card.</p>
</article>