Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Margin

Use the margin utility to change the spacing around an item.

Examples

Margin on all sides

.ds-u-margin--00px
.ds-u-margin--054px
.ds-u-margin--18px
.ds-u-margin--216px
.ds-u-margin--324px
.ds-u-margin--432px
.ds-u-margin--540px
.ds-u-margin--648px
.ds-u-margin--756px

Margin on left and right (x-axis)

.ds-u-margin-x--00px
.ds-u-margin-x--054px
.ds-u-margin-x--18px
.ds-u-margin-x--216px
.ds-u-margin-x--324px
.ds-u-margin-x--432px
.ds-u-margin-x--540px
.ds-u-margin-x--648px
.ds-u-margin-x--756px

Margin on top and bottom (y-axis)

.ds-u-margin-y--00px
.ds-u-margin-y--054px
.ds-u-margin-y--18px
.ds-u-margin-y--216px
.ds-u-margin-y--324px
.ds-u-margin-y--432px
.ds-u-margin-y--540px
.ds-u-margin-y--648px
.ds-u-margin-y--756px

Margin top

.ds-u-margin-top--00px
.ds-u-margin-top--054px
.ds-u-margin-top--18px
.ds-u-margin-top--216px
.ds-u-margin-top--324px
.ds-u-margin-top--432px
.ds-u-margin-top--540px
.ds-u-margin-top--648px
.ds-u-margin-top--756px

Margin right

.ds-u-margin-right--00px
.ds-u-margin-right--054px
.ds-u-margin-right--18px
.ds-u-margin-right--216px
.ds-u-margin-right--324px
.ds-u-margin-right--432px
.ds-u-margin-right--540px
.ds-u-margin-right--648px
.ds-u-margin-right--756px

Margin bottom

.ds-u-margin-bottom--00px
.ds-u-margin-bottom--054px
.ds-u-margin-bottom--18px
.ds-u-margin-bottom--216px
.ds-u-margin-bottom--324px
.ds-u-margin-bottom--432px
.ds-u-margin-bottom--540px
.ds-u-margin-bottom--648px
.ds-u-margin-bottom--756px

Margin left

.ds-u-margin-left--00px
.ds-u-margin-left--054px
.ds-u-margin-left--18px
.ds-u-margin-left--216px
.ds-u-margin-left--324px
.ds-u-margin-left--432px
.ds-u-margin-left--540px
.ds-u-margin-left--648px
.ds-u-margin-left--756px

Auto margins

All sides

.ds-u-margin--autoauto

Left and right

.ds-u-margin-x--autoauto

Top and bottom

.ds-u-margin-y--autoauto

Top

.ds-u-margin-top--autoauto

Right

.ds-u-margin-right--autoauto

Bottom

.ds-u-margin-bottom--autoauto

Left

.ds-u-margin-left--autoauto

Responsive margins

Responsive format: .ds-u-[breakpoint]-margin-[x|y|bottom|left|right|top]--[0-7]

Scale: 0.22

Read more about how the design system approaches spacing here.