Spacing

The Material Design 3 spacing system provides a scale of measurement tokens used for margin, padding, and gap utilities. The scale ranges from 0 to 900, with each step mapped to a specific pixel value.

Token	Value
0	0px
25	2px
50	4px
75	6px
100	8px
125	10px
150	12px
175	14px
200	16px
250	20px
300	24px
400	32px
450	36px
500	40px
600	48px
700	56px
800	64px
900	72px

Import

For CSS

@import "@sandlada/material-design-css/spacing/utilities.css";
@import "@sandlada/material-design-css/spacing/variables.css";

For TailwindCSS v4

@import "tailwindcss";
@import "@sandlada/material-design-css/spacing/tw.css";

Usage

padding-100, margin-100 and gap-100 import from utilities.css and variables.css.

If you import tw.css into tailwindcss, please continue to use the p, m, and gap attributes that come with tailwindcss. In tw.css, change --spacing from 6px to 8px.

<div class="h-fit w-fit padding-0 bg-primary">
    <span class="border inline-flex bg-primary-container text-on-primary-container h-fit w-fit">
        Padding 0
    </span>
</div>

Logical directions

Spacing utilities support logical direction properties:

Prefix	Description
padding-inline-*	Horizontal padding (left + right in LTR)
padding-inline-start-*	Start-side padding
padding-inline-end-*	End-side padding
padding-block-*	Vertical padding (top + bottom)
padding-block-start-*	Top padding
padding-block-end-*	Bottom padding
margin-inline-*	Horizontal margin
margin-inline-start-*	Start-side margin
margin-inline-end-*	End-side margin
margin-block-*	Vertical margin
margin-block-start-*	Top margin
margin-block-end-*	Bottom margin
col-gap-*	Column gap
row-gap-*	Row gap

Example:

<div class="padding-inline-200 padding-block-100">
    Content with horizontal 16px and vertical 8px padding
</div>

<div class="margin-inline-start-300 margin-block-end-200">
    Content with 24px start margin and 16px bottom margin
</div>

All available spacing scales

The following scales are available for all utility prefixes (padding-, padding-inline-, padding-inline-start-, padding-inline-end-, padding-block-, padding-block-start-, padding-block-end-, margin-, margin-inline-, margin-inline-start-, margin-inline-end-, margin-block-, margin-block-start-, margin-block-end-, gap-, col-gap-, row-gap-):

Scale	Value
0	0px
25	2px
50	4px
75	6px
100	8px
125	10px
150	12px
175	14px
200	16px
250	20px
300	24px
400	32px
450	36px
500	40px
600	48px
700	56px
800	64px
900	72px

CSS variables

Use CSS Variables, import variables.css.

You can also use the underlying CSS variables directly in your styles:

.my-element {
    padding: var(--md-sys-measurement-space200);
    margin: var(--md-sys-measurement-space100);
    gap: var(--md-sys-measurement-space300);
}

Available variables:

• --md-sys-measurement-space0 through --md-sys-measurement-space900