Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Utilities

Padding

Change the spacing inside an item. Padding classes include responsive prefixes.

Padding on all sides

Padding

CSS property: padding

.vads-u-padding--0

0px

.vads-u-padding--1px

1px

.vads-u-padding--0p25

2px

.vads-u-padding--0p5

4px

.vads-u-padding--1

8px

.vads-u-padding--1p5

12px

.vads-u-padding--2

16px

.vads-u-padding--2p5

20px

.vads-u-padding--3

24px

.vads-u-padding--4

32px

.vads-u-padding--5

40px

.vads-u-padding--6

48px

.vads-u-padding--7

56px

.vads-u-padding--8

64px

.vads-u-padding--9

72px

Padding top and bottom

Padding top and bottom

CSS property: padding-top, padding-bottom

.vads-u-padding-y--0

0px

.vads-u-padding-y--1px

1px

.vads-u-padding-y--0p25

2px

.vads-u-padding-y--0p5

4px

.vads-u-padding-y--1

8px

.vads-u-padding-y--1p5

12px

.vads-u-padding-y--2

16px

.vads-u-padding-y--2p5

20px

.vads-u-padding-y--3

24px

.vads-u-padding-y--4

32px

.vads-u-padding-y--5

40px

.vads-u-padding-y--6

48px

.vads-u-padding-y--7

56px

.vads-u-padding-y--8

64px

.vads-u-padding-y--9

72px

Padding top

Padding top

CSS property: padding-top

.vads-u-padding-top--0

0px

.vads-u-padding-top--1px

1px

.vads-u-padding-top--0p25

2px

.vads-u-padding-top--0p5

4px

.vads-u-padding-top--1

8px

.vads-u-padding-top--1p5

12px

.vads-u-padding-top--2

16px

.vads-u-padding-top--2p5

20px

.vads-u-padding-top--3

24px

.vads-u-padding-top--4

32px

.vads-u-padding-top--5

40px

.vads-u-padding-top--6

48px

.vads-u-padding-top--7

56px

.vads-u-padding-top--8

64px

.vads-u-padding-top--9

72px

Padding bottom

Padding bottom

CSS property: padding-bottom

.vads-u-padding-bottom--0

0px

.vads-u-padding-bottom--1px

1px

.vads-u-padding-bottom--0p25

2px

.vads-u-padding-bottom--0p5

4px

.vads-u-padding-bottom--1

8px

.vads-u-padding-bottom--1p5

12px

.vads-u-padding-bottom--2

16px

.vads-u-padding-bottom--2p5

20px

.vads-u-padding-bottom--3

24px

.vads-u-padding-bottom--4

32px

.vads-u-padding-bottom--5

40px

.vads-u-padding-bottom--6

48px

.vads-u-padding-bottom--7

56px

.vads-u-padding-bottom--8

64px

.vads-u-padding-bottom--9

72px

Padding right and left

Padding right and left

CSS property: padding-right, padding-left

.vads-u-padding-x--0

0px

.vads-u-padding-x--1px

1px

.vads-u-padding-x--0p25

2px

.vads-u-padding-x--0p5

4px

.vads-u-padding-x--1

8px

.vads-u-padding-x--1p5

12px

.vads-u-padding-x--2

16px

.vads-u-padding-x--2p5

20px

.vads-u-padding-x--3

24px

.vads-u-padding-x--4

32px

.vads-u-padding-x--5

40px

.vads-u-padding-x--6

48px

.vads-u-padding-x--7

56px

.vads-u-padding-x--8

64px

.vads-u-padding-x--9

72px

Padding right

Padding right

CSS property: padding-right

.vads-u-padding-right--0

0px

.vads-u-padding-right--1px

1px

.vads-u-padding-right--0p25

2px

.vads-u-padding-right--0p5

4px

.vads-u-padding-right--1

8px

.vads-u-padding-right--1p5

12px

.vads-u-padding-right--2

16px

.vads-u-padding-right--2p5

20px

.vads-u-padding-right--3

24px

.vads-u-padding-right--4

32px

.vads-u-padding-right--5

40px

.vads-u-padding-right--6

48px

.vads-u-padding-right--7

56px

.vads-u-padding-right--8

64px

.vads-u-padding-right--9

72px

Padding left

Padding left

CSS property: padding-left

.vads-u-padding-left--0

0px

.vads-u-padding-left--1px

1px

.vads-u-padding-left--0p25

2px

.vads-u-padding-left--0p5

4px

.vads-u-padding-left--1

8px

.vads-u-padding-left--1p5

12px

.vads-u-padding-left--2

16px

.vads-u-padding-left--2p5

20px

.vads-u-padding-left--3

24px

.vads-u-padding-left--4

32px

.vads-u-padding-left--5

40px

.vads-u-padding-left--6

48px

.vads-u-padding-left--7

56px

.vads-u-padding-left--8

64px

.vads-u-padding-left--9

72px

Responsive prefixes

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.

Example

---
layout: iframe
permalink: utilities/html/padding-responsive
---
<div class="vads-u-padding--2 medium-screen:vads-u-padding--5 large-screen:vads-u-padding--9" style="background-color:#112e51; color: white">
  <h1 class="vads-u-margin--0">This is a demo</h1>
  <p class="vads-u-margin--0">Use the tabs to see how the responsive padding utility works</p>
</div>
Breakpoint sass variable Width
$xsmall-screen 320px
$small-screen 481px
$medium-screen 768px
$small-desktop-screen 1008px
$large-screen 1201px

Read more about breakpoints.