Skip to main content
U.S. flag

An official website of the United States government

Latest release: Component Library: v51.3.0 released on Jul 21, 2025 | Guidance: Sprint 7 released on Jul 21, 2025 | Figma: Changelog

Foundation

Margins

Change the spacing around an item.

Margin classes include responsive prefixes.

Margin on all sides

Margins

CSS property: margin

.vads-u-margin--0

0px

.vads-u-margin--1px

1px

.vads-u-margin--0p25

2px

.vads-u-margin--0p5

4px

.vads-u-margin--1

8px

.vads-u-margin--1p5

12px

.vads-u-margin--2

16px

.vads-u-margin--2p5

20px

.vads-u-margin--3

24px

.vads-u-margin--4

32px

.vads-u-margin--5

40px

.vads-u-margin--6

48px

.vads-u-margin--7

56px

.vads-u-margin--8

64px

.vads-u-margin--9

72px

Margin top and bottom

Margin top and bottom

CSS property: margin-top, margin-bottom

The ghosted square represents another element just below the example in the DOM to depict a negative bottom margin.

.vads-u-margin-y--0

0px

.vads-u-margin-y--1px

1px

.vads-u-margin-y--0p25

2px

.vads-u-margin-y--0p5

4px

.vads-u-margin-y--1

8px

.vads-u-margin-y--1p5

12px

.vads-u-margin-y--2

16px

.vads-u-margin-y--2p5

20px

.vads-u-margin-y--3

24px

.vads-u-margin-y--4

32px

.vads-u-margin-y--5

40px

.vads-u-margin-y--6

48px

.vads-u-margin-y--7

56px

.vads-u-margin-y--8

64px

.vads-u-margin-y--9

72px

.vads-u-margin-y--neg9

-72px

.vads-u-margin-y--neg8

-64px

.vads-u-margin-y--neg7

-56px

.vads-u-margin-y--neg6

-48px

.vads-u-margin-y--neg5

-40px

.vads-u-margin-y--neg4

-32px

.vads-u-margin-y--neg3

-24px

.vads-u-margin-y--neg2p5

-20px

.vads-u-margin-y--neg2

-16px

.vads-u-margin-y--neg1p5

-12px

.vads-u-margin-y--neg1

-8px

.vads-u-margin-y--neg0p5

-4px

.vads-u-margin-y--neg0p25

-2px

.vads-u-margin-y--neg1px

-1px

Margin top

Margin top

CSS property: margin-top

.vads-u-margin-top--0

0px

.vads-u-margin-top--1px

1px

.vads-u-margin-top--0p25

2px

.vads-u-margin-top--0p5

4px

.vads-u-margin-top--1

8px

.vads-u-margin-top--1p5

12px

.vads-u-margin-top--2

16px

.vads-u-margin-top--2p5

20px

.vads-u-margin-top--3

24px

.vads-u-margin-top--4

32px

.vads-u-margin-top--5

40px

.vads-u-margin-top--6

48px

.vads-u-margin-top--7

56px

.vads-u-margin-top--8

64px

.vads-u-margin-top--9

72px

.vads-u-margin-top--neg9

-72px

.vads-u-margin-top--neg8

-64px

.vads-u-margin-top--neg7

-56px

.vads-u-margin-top--neg6

-48px

.vads-u-margin-top--neg5

-40px

.vads-u-margin-top--neg4

-32px

.vads-u-margin-top--neg3

-24px

.vads-u-margin-top--neg2p5

-20px

.vads-u-margin-top--neg2

-16px

.vads-u-margin-top--neg1p5

-12px

.vads-u-margin-top--neg1

-8px

.vads-u-margin-top--neg0p5

-4px

.vads-u-margin-top--neg0p25

-2px

.vads-u-margin-top--neg1px

-1px

Margin bottom

Margin bottom

CSS property: margin-bottom

The ghosted square represents another element just below the example in the DOM to depict a negative bottom margin.

.vads-u-margin-bottom--0

0px

.vads-u-margin-bottom--1px

1px

.vads-u-margin-bottom--0p25

2px

.vads-u-margin-bottom--0p5

4px

.vads-u-margin-bottom--1

8px

.vads-u-margin-bottom--1p5

12px

.vads-u-margin-bottom--2

16px

.vads-u-margin-bottom--2p5

20px

.vads-u-margin-bottom--3

24px

.vads-u-margin-bottom--4

32px

.vads-u-margin-bottom--5

40px

.vads-u-margin-bottom--6

48px

.vads-u-margin-bottom--7

56px

.vads-u-margin-bottom--8

64px

.vads-u-margin-bottom--9

72px

.vads-u-margin-bottom--neg9

-72px

.vads-u-margin-bottom--neg8

-64px

.vads-u-margin-bottom--neg7

-56px

.vads-u-margin-bottom--neg6

-48px

.vads-u-margin-bottom--neg5

-40px

.vads-u-margin-bottom--neg4

-32px

.vads-u-margin-bottom--neg3

-24px

.vads-u-margin-bottom--neg2p5

-20px

.vads-u-margin-bottom--neg2

-16px

.vads-u-margin-bottom--neg1p5

-12px

.vads-u-margin-bottom--neg1

-8px

.vads-u-margin-bottom--neg0p5

-4px

.vads-u-margin-bottom--neg0p25

-2px

.vads-u-margin-bottom--neg1px

-1px

Margin right and left

Margin right and left

CSS property: margin-right, margin-left

The squares in this example are set to display inline.The ghosted square represents another element just below the example in the DOM to depict a negative right margin.

.vads-u-margin-x--0

0px

.vads-u-margin-x--1px

1px

.vads-u-margin-x--0p25

2px

.vads-u-margin-x--0p5

4px

.vads-u-margin-x--1

8px

.vads-u-margin-x--1p5

12px

.vads-u-margin-x--2

16px

.vads-u-margin-x--2p5

20px

.vads-u-margin-x--3

24px

.vads-u-margin-x--4

32px

.vads-u-margin-x--5

40px

.vads-u-margin-x--6

48px

.vads-u-margin-x--7

56px

.vads-u-margin-x--8

64px

.vads-u-margin-x--9

72px

.vads-u-margin-x--neg9

-72px

.vads-u-margin-x--neg8

-64px

.vads-u-margin-x--neg7

-56px

.vads-u-margin-x--neg6

-48px

.vads-u-margin-x--neg5

-40px

.vads-u-margin-x--neg4

-32px

.vads-u-margin-x--neg3

-24px

.vads-u-margin-x--neg2p5

-20px

.vads-u-margin-x--neg2

-16px

.vads-u-margin-x--neg1p5

-12px

.vads-u-margin-x--neg1

-8px

.vads-u-margin-x--neg0p5

-4px

.vads-u-margin-x--neg0p25

-2px

.vads-u-margin-x--neg1px

-1px

.vads-u-margin-x--auto

auto

Margin right

Margin right

CSS property: margin-right

The squares in this example are set to display inline.The ghosted square represents another element just below the example in the DOM to depict a negative right margin.

.vads-u-margin-right--0

0px

.vads-u-margin-right--1px

1px

.vads-u-margin-right--0p25

2px

.vads-u-margin-right--0p5

4px

.vads-u-margin-right--1

8px

.vads-u-margin-right--1p5

12px

.vads-u-margin-right--2

16px

.vads-u-margin-right--2p5

20px

.vads-u-margin-right--3

24px

.vads-u-margin-right--4

32px

.vads-u-margin-right--5

40px

.vads-u-margin-right--6

48px

.vads-u-margin-right--7

56px

.vads-u-margin-right--8

64px

.vads-u-margin-right--9

72px

.vads-u-margin-right--neg9

-72px

.vads-u-margin-right--neg8

-64px

.vads-u-margin-right--neg7

-56px

.vads-u-margin-right--neg6

-48px

.vads-u-margin-right--neg5

-40px

.vads-u-margin-right--neg4

-32px

.vads-u-margin-right--neg3

-24px

.vads-u-margin-right--neg2p5

-20px

.vads-u-margin-right--neg2

-16px

.vads-u-margin-right--neg1p5

-12px

.vads-u-margin-right--neg1

-8px

.vads-u-margin-right--neg0p5

-4px

.vads-u-margin-right--neg0p25

-2px

.vads-u-margin-right--neg1px

-1px

.vads-u-margin-right--auto

auto

Margin left

Margin left

CSS property: margin-left

.vads-u-margin-left--0

0px

.vads-u-margin-left--1px

1px

.vads-u-margin-left--0p25

2px

.vads-u-margin-left--0p5

4px

.vads-u-margin-left--1

8px

.vads-u-margin-left--1p5

12px

.vads-u-margin-left--2

16px

.vads-u-margin-left--2p5

20px

.vads-u-margin-left--3

24px

.vads-u-margin-left--4

32px

.vads-u-margin-left--5

40px

.vads-u-margin-left--6

48px

.vads-u-margin-left--7

56px

.vads-u-margin-left--8

64px

.vads-u-margin-left--9

72px

.vads-u-margin-left--neg9

-72px

.vads-u-margin-left--neg8

-64px

.vads-u-margin-left--neg7

-56px

.vads-u-margin-left--neg6

-48px

.vads-u-margin-left--neg5

-40px

.vads-u-margin-left--neg4

-32px

.vads-u-margin-left--neg3

-24px

.vads-u-margin-left--neg2p5

-20px

.vads-u-margin-left--neg2

-16px

.vads-u-margin-left--neg1p5

-12px

.vads-u-margin-left--neg1

-8px

.vads-u-margin-left--neg0p5

-4px

.vads-u-margin-left--neg0p25

-2px

.vads-u-margin-left--neg1px

-1px

.vads-u-margin-left--auto

auto

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

  <div class="tablet:vads-u-margin--3 desktop-lg:vads-u-margin--5">
Deprecated VADS Breakpoint Names USWDS Breakpoint Sass Variable USWDS Breakpoint Custom Property Width $xsmall-screen $mobile --mobile 320px $small-screen $mobile-lg --mobile-lg 481px $tablet --tablet 640px $medium-screen $medium-screen --medium-screen 768px $small-desktop-screen $desktop --desktop 1024px $large-screen $desktop-lg --desktop-lg 1201px

Read more about breakpoints.

Edit this page in GitHub (Permissions required)
Last updated: Jun 17, 2025