Skip to main content
U.S. Flag

An official website of the United States government

CMS Design System

Download Code View on GitHub

Margin

Use the margin utility to change an element's margin.

Format: .ds-u-margin-[x|y|bottom|left|right|top]--[0-7]

Read more about how the design system approaches spacing here.

margin

.ds-u-margin--0
.ds-u-margin--1
.ds-u-margin--2
.ds-u-margin--3
.ds-u-margin--4
.ds-u-margin--5
.ds-u-margin--6
.ds-u-margin--7
.ds-u-margin--auto
Code snippet
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin--0 ds-u-display--inline-block">
    <code>.ds-u-margin--0</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin--1 ds-u-display--inline-block">
    <code>.ds-u-margin--1</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin--2 ds-u-display--inline-block">
    <code>.ds-u-margin--2</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin--3 ds-u-display--inline-block">
    <code>.ds-u-margin--3</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin--4 ds-u-display--inline-block">
    <code>.ds-u-margin--4</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin--5 ds-u-display--inline-block">
    <code>.ds-u-margin--5</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin--6 ds-u-display--inline-block">
    <code>.ds-u-margin--6</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin--7 ds-u-display--inline-block">
    <code>.ds-u-margin--7</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin--auto" style="width: 250px">
    <code>.ds-u-margin--auto</code>
  </div>
</div>

margin-x

.ds-u-margin-x--0
.ds-u-margin-x--1
.ds-u-margin-x--2
.ds-u-margin-x--3
.ds-u-margin-x--4
.ds-u-margin-x--5
.ds-u-margin-x--6
.ds-u-margin-x--7
.ds-u-margin-x--auto
Code snippet
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-x--0 ds-u-display--inline-block">
    <code>.ds-u-margin-x--0</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-x--1 ds-u-display--inline-block">
    <code>.ds-u-margin-x--1</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-x--2 ds-u-display--inline-block">
    <code>.ds-u-margin-x--2</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-x--3 ds-u-display--inline-block">
    <code>.ds-u-margin-x--3</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-x--4 ds-u-display--inline-block">
    <code>.ds-u-margin-x--4</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-x--5 ds-u-display--inline-block">
    <code>.ds-u-margin-x--5</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-x--6 ds-u-display--inline-block">
    <code>.ds-u-margin-x--6</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-x--7 ds-u-display--inline-block">
    <code>.ds-u-margin-x--7</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-x--auto" style="width: 250px">
    <code>.ds-u-margin-x--auto</code>
  </div>
</div>

margin-y

.ds-u-margin-y--0
.ds-u-margin-y--1
.ds-u-margin-y--2
.ds-u-margin-y--3
.ds-u-margin-y--4
.ds-u-margin-y--5
.ds-u-margin-y--6
.ds-u-margin-y--7
.ds-u-margin-y--auto
Code snippet
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-y--0 ds-u-display--inline-block">
    <code>.ds-u-margin-y--0</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-y--1 ds-u-display--inline-block">
    <code>.ds-u-margin-y--1</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-y--2 ds-u-display--inline-block">
    <code>.ds-u-margin-y--2</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-y--3 ds-u-display--inline-block">
    <code>.ds-u-margin-y--3</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-y--4 ds-u-display--inline-block">
    <code>.ds-u-margin-y--4</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-y--5 ds-u-display--inline-block">
    <code>.ds-u-margin-y--5</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-y--6 ds-u-display--inline-block">
    <code>.ds-u-margin-y--6</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-y--7 ds-u-display--inline-block">
    <code>.ds-u-margin-y--7</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-y--auto" style="width: 250px">
    <code>.ds-u-margin-y--auto</code>
  </div>
</div>

margin-bottom

.ds-u-margin-bottom--0
.ds-u-margin-bottom--1
.ds-u-margin-bottom--2
.ds-u-margin-bottom--3
.ds-u-margin-bottom--4
.ds-u-margin-bottom--5
.ds-u-margin-bottom--6
.ds-u-margin-bottom--7
.ds-u-margin-bottom--auto
Code snippet
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-bottom--0 ds-u-display--inline-block">
    <code>.ds-u-margin-bottom--0</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-bottom--1 ds-u-display--inline-block">
    <code>.ds-u-margin-bottom--1</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-bottom--2 ds-u-display--inline-block">
    <code>.ds-u-margin-bottom--2</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-bottom--3 ds-u-display--inline-block">
    <code>.ds-u-margin-bottom--3</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-bottom--4 ds-u-display--inline-block">
    <code>.ds-u-margin-bottom--4</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-bottom--5 ds-u-display--inline-block">
    <code>.ds-u-margin-bottom--5</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-bottom--6 ds-u-display--inline-block">
    <code>.ds-u-margin-bottom--6</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-bottom--7 ds-u-display--inline-block">
    <code>.ds-u-margin-bottom--7</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-bottom--auto" style="width: 250px">
    <code>.ds-u-margin-bottom--auto</code>
  </div>
</div>

margin-left

.ds-u-margin-left--0
.ds-u-margin-left--1
.ds-u-margin-left--2
.ds-u-margin-left--3
.ds-u-margin-left--4
.ds-u-margin-left--5
.ds-u-margin-left--6
.ds-u-margin-left--7
.ds-u-margin-left--auto
Code snippet
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-left--0 ds-u-display--inline-block">
    <code>.ds-u-margin-left--0</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-left--1 ds-u-display--inline-block">
    <code>.ds-u-margin-left--1</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-left--2 ds-u-display--inline-block">
    <code>.ds-u-margin-left--2</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-left--3 ds-u-display--inline-block">
    <code>.ds-u-margin-left--3</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-left--4 ds-u-display--inline-block">
    <code>.ds-u-margin-left--4</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-left--5 ds-u-display--inline-block">
    <code>.ds-u-margin-left--5</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-left--6 ds-u-display--inline-block">
    <code>.ds-u-margin-left--6</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-left--7 ds-u-display--inline-block">
    <code>.ds-u-margin-left--7</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-left--auto" style="width: 250px">
    <code>.ds-u-margin-left--auto</code>
  </div>
</div>

margin-right

.ds-u-margin-right--0
.ds-u-margin-right--1
.ds-u-margin-right--2
.ds-u-margin-right--3
.ds-u-margin-right--4
.ds-u-margin-right--5
.ds-u-margin-right--6
.ds-u-margin-right--7
.ds-u-margin-right--auto
Code snippet
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-right--0 ds-u-display--inline-block">
    <code>.ds-u-margin-right--0</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-right--1 ds-u-display--inline-block">
    <code>.ds-u-margin-right--1</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-right--2 ds-u-display--inline-block">
    <code>.ds-u-margin-right--2</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-right--3 ds-u-display--inline-block">
    <code>.ds-u-margin-right--3</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-right--4 ds-u-display--inline-block">
    <code>.ds-u-margin-right--4</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-right--5 ds-u-display--inline-block">
    <code>.ds-u-margin-right--5</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-right--6 ds-u-display--inline-block">
    <code>.ds-u-margin-right--6</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-right--7 ds-u-display--inline-block">
    <code>.ds-u-margin-right--7</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-right--auto" style="width: 250px">
    <code>.ds-u-margin-right--auto</code>
  </div>
</div>

margin-top

.ds-u-margin-top--0
.ds-u-margin-top--1
.ds-u-margin-top--2
.ds-u-margin-top--3
.ds-u-margin-top--4
.ds-u-margin-top--5
.ds-u-margin-top--6
.ds-u-margin-top--7
.ds-u-margin-top--auto
Code snippet
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-top--0 ds-u-display--inline-block">
    <code>.ds-u-margin-top--0</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-top--1 ds-u-display--inline-block">
    <code>.ds-u-margin-top--1</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-top--2 ds-u-display--inline-block">
    <code>.ds-u-margin-top--2</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-top--3 ds-u-display--inline-block">
    <code>.ds-u-margin-top--3</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-top--4 ds-u-display--inline-block">
    <code>.ds-u-margin-top--4</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-top--5 ds-u-display--inline-block">
    <code>.ds-u-margin-top--5</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-top--6 ds-u-display--inline-block">
    <code>.ds-u-margin-top--6</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-top--7 ds-u-display--inline-block">
    <code>.ds-u-margin-top--7</code>
  </div>
</div>
<div
  class="ds-u-fill--secondary ds-u-margin-bottom--2"
  style="max-width: fit-content"
>
  <div class="ds-u-margin-top--auto" style="width: 250px">
    <code>.ds-u-margin-top--auto</code>
  </div>
</div>

Responsive margins

Use a breakpoint prefix to change the margin at specific breakpoints.

Code snippet