Skip to main content
U.S. Flag

An official website of the United States government

Padding

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

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

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

Read more about how the design system approaches spacing here.

padding

.ds-u-padding--0
.ds-u-padding--05
.ds-u-padding--1
.ds-u-padding--2
.ds-u-padding--3
.ds-u-padding--4
.ds-u-padding--5
.ds-u-padding--6
.ds-u-padding--7

padding-x

.ds-u-padding-x--0
.ds-u-padding-x--05
.ds-u-padding-x--1
.ds-u-padding-x--2
.ds-u-padding-x--3
.ds-u-padding-x--4
.ds-u-padding-x--5
.ds-u-padding-x--6
.ds-u-padding-x--7

padding-y

.ds-u-padding-y--0
.ds-u-padding-y--05
.ds-u-padding-y--1
.ds-u-padding-y--2
.ds-u-padding-y--3
.ds-u-padding-y--4
.ds-u-padding-y--5
.ds-u-padding-y--6
.ds-u-padding-y--7

padding-bottom

.ds-u-padding-bottom--0
.ds-u-padding-bottom--05
.ds-u-padding-bottom--1
.ds-u-padding-bottom--2
.ds-u-padding-bottom--3
.ds-u-padding-bottom--4
.ds-u-padding-bottom--5
.ds-u-padding-bottom--6
.ds-u-padding-bottom--7

padding-left

.ds-u-padding-left--0
.ds-u-padding-left--05
.ds-u-padding-left--1
.ds-u-padding-left--2
.ds-u-padding-left--3
.ds-u-padding-left--4
.ds-u-padding-left--5
.ds-u-padding-left--6
.ds-u-padding-left--7

padding-right

.ds-u-padding-right--0
.ds-u-padding-right--05
.ds-u-padding-right--1
.ds-u-padding-right--2
.ds-u-padding-right--3
.ds-u-padding-right--4
.ds-u-padding-right--5
.ds-u-padding-right--6
.ds-u-padding-right--7

padding-top

.ds-u-padding-top--0
.ds-u-padding-top--05
.ds-u-padding-top--1
.ds-u-padding-top--2
.ds-u-padding-top--3
.ds-u-padding-top--4
.ds-u-padding-top--5
.ds-u-padding-top--6
.ds-u-padding-top--7

Responsive padding

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