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

Padding

Use the padding utility to change the spacing inside an item.

Examples

Padding on all sides

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

Padding on left and right (x-axis)

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

Padding on top and bottom (y-axis)

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

Padding top

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

Padding right

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

Padding bottom

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

Padding left

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

Responsive padding

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

Scale: 0.22

Read more about how the design system approaches spacing here.