Space

The Material Design 3 space 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/space/utilities.css";
@import "@sandlada/material-design-css/space/variables.css";

For TailwindCSS v4

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

Usage

padding-100, margin-100 and gap-100 and other gap-* / margin-* / padding-* classes are provided by space/utilities.css, with variables from space/variables.css.

If you use TailwindCSS, import space/tw.css instead: it sets --spacing: 8px, so Tailwind’s built-in p-*, m-* and gap-* utilities map onto the M3 8px-based measurement scale.

<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

Space 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 space 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