Skip to main content
U.S. Flag

An official website of the United States government

Margin

Use the margin utility to change an element's margin.

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

Read more about how the design system approaches spacing here.

margin

.ds-u-margin--0
.ds-u-margin--1
.ds-u-margin--2
.ds-u-margin--3
.ds-u-margin--4
.ds-u-margin--5
.ds-u-margin--6
.ds-u-margin--7
.ds-u-margin--auto

margin-x

.ds-u-margin-x--0
.ds-u-margin-x--1
.ds-u-margin-x--2
.ds-u-margin-x--3
.ds-u-margin-x--4
.ds-u-margin-x--5
.ds-u-margin-x--6
.ds-u-margin-x--7
.ds-u-margin-x--auto

margin-y

.ds-u-margin-y--0
.ds-u-margin-y--1
.ds-u-margin-y--2
.ds-u-margin-y--3
.ds-u-margin-y--4
.ds-u-margin-y--5
.ds-u-margin-y--6
.ds-u-margin-y--7
.ds-u-margin-y--auto

margin-bottom

.ds-u-margin-bottom--0
.ds-u-margin-bottom--1
.ds-u-margin-bottom--2
.ds-u-margin-bottom--3
.ds-u-margin-bottom--4
.ds-u-margin-bottom--5
.ds-u-margin-bottom--6
.ds-u-margin-bottom--7
.ds-u-margin-bottom--auto

margin-left

.ds-u-margin-left--0
.ds-u-margin-left--1
.ds-u-margin-left--2
.ds-u-margin-left--3
.ds-u-margin-left--4
.ds-u-margin-left--5
.ds-u-margin-left--6
.ds-u-margin-left--7
.ds-u-margin-left--auto

margin-right

.ds-u-margin-right--0
.ds-u-margin-right--1
.ds-u-margin-right--2
.ds-u-margin-right--3
.ds-u-margin-right--4
.ds-u-margin-right--5
.ds-u-margin-right--6
.ds-u-margin-right--7
.ds-u-margin-right--auto

margin-top

.ds-u-margin-top--0
.ds-u-margin-top--1
.ds-u-margin-top--2
.ds-u-margin-top--3
.ds-u-margin-top--4
.ds-u-margin-top--5
.ds-u-margin-top--6
.ds-u-margin-top--7
.ds-u-margin-top--auto

Responsive margins

Use a breakpoint prefix to change the margin at specific breakpoints.