Margin and Padding

Spacing utilities add margin (space outside an element) and padding (space inside an element) using the NYSDS spacing scale. Class names follow the pattern .nys-margin-{scale} and .nys-padding-{scale}.

Spacing scale

All margin and padding utilities use the same spacing scale:

Scale value Size Class example
1px 1px .nys-margin-1px
2px 2px .nys-margin-2px
50 4px .nys-margin-50
100 8px .nys-margin-100
150 12px .nys-margin-150
200 16px .nys-margin-200
250 20px .nys-margin-250
300 24px .nys-margin-300
400 32px .nys-margin-400
500 40px .nys-margin-500
600 48px .nys-margin-600
700 56px .nys-margin-700
800 64px .nys-margin-800
1200 96px .nys-margin-1200

Margin

Margin adds space outside an element. Use .nys-margin-{scale} for uniform margin on all sides.

.nys-margin-100
.nys-margin-300
.nys-margin-600
Copy Code
<div class="nys-margin-100">8px margin on all sides</div>
<div class="nys-margin-300">24px margin on all sides</div>
<div class="nys-margin-600">48px margin on all sides</div>

Directional margin

Add margin to specific sides with directional suffixes:

  • -x — left and right
  • -y — top and bottom
  • -t — top only
  • -r — right only
  • -b — bottom only
  • -l — left only
.nys-margin-x-400
.nys-margin-y-400
Copy Code
<!-- Horizontal margin (left and right) -->
<div class="nys-margin-x-400">32px left and right</div>
<!-- Vertical margin (top and bottom) -->
<div class="nys-margin-y-400">32px top and bottom</div>
<!-- Individual sides -->
<div class="nys-margin-t-200">16px top only</div>
<div class="nys-margin-b-300">24px bottom only</div>
<div class="nys-margin-l-100 nys-margin-r-500">8px left, 40px right</div>

Padding

Padding adds space inside an element. Use .nys-padding-{scale} for uniform padding on all sides. The same spacing scale and directional suffixes apply.

.nys-padding-100
.nys-padding-300
.nys-padding-600
Copy Code
<div class="nys-padding-100">8px padding on all sides</div>
<div class="nys-padding-300">24px padding on all sides</div>
<div class="nys-padding-600">48px padding on all sides</div>

Directional padding

.nys-padding-x-600 .nys-padding-y-100
.nys-padding-t-50 .nys-padding-r-200 .nys-padding-b-400 .nys-padding-l-800
Copy Code
<!-- Horizontal and vertical padding -->
<div class="nys-padding-x-600 nys-padding-y-100">
  Wide horizontal, narrow vertical
</div>
<!-- Individual sides -->
<div class="nys-padding-t-50 nys-padding-r-200 nys-padding-b-400 nys-padding-l-800">
  Different padding on each side
</div>

Practical example

Combine margin and padding utilities with layout utilities to space content in a page section.

Apply for benefits

Check your eligibility for New York State assistance programs including SNAP, Medicaid, and HEAP.

Renew your license

Renew your driver license or non-driver ID online through the DMV. Most renewals can be completed in minutes.

Copy Code
<div class="nys-grid-row nys-grid-gap">
  <div class="nys-grid-col-6">
    <div class="nys-padding-400">
      <h3 class="nys-margin-b-200">Apply for benefits</h3>
      <p class="nys-margin-b-300">Check your eligibility for assistance programs.</p>
      <nys-button label="Check eligibility" variant="outline"></nys-button>
    </div>
  </div>
</div>

Responsive variants

Margin and padding utilities do not currently support responsive prefixes. Apply them uniformly or use Grid and Flexbox utilities for responsive spacing.

Edit this page on GitHub (Permissions required)

Last updated: July 20, 2026