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.

Fall updates Formation deprecation nearing completion!

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

Read more about breakpoints.

Edit this page in GitHub (Permissions required)
Last updated: Apr 25, 2022