Skip to main content
U.S. Flag

An official website of the United States government

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]

Read more about how the design system approaches spacing here.