Margin utility classes - Simplex Component Library

Margin

Margin utility classes allow authors to apply margins to any element at specific screen sizes.

Overall usage

Used to apply specific margins to any element or component.

Accessibility

N/A

margin-top: all sizes

u-mar-t-0

u-mar-t-h

u-mar-t-1

u-mar-t-2

u-mar-t-3

u-mar-t-4

u-mar-t-5

<div class="u-mar-t-0">u-mar-t-0</div>
<div class="u-mar-t-h">u-mar-t-h</div>
<div class="u-mar-t-1">u-mar-t-1</div>
<div class="u-mar-t-2">u-mar-t-2</div>
<div class="u-mar-t-3">u-mar-t-3</div>
<div class="u-mar-t-4">u-mar-t-4</div>
<div class="u-mar-t-5">u-mar-t-5</div>

margin-top: xs only

u-mar-t-0-xs

u-mar-t-h-xs

u-mar-t-1-xs

u-mar-t-2-xs

u-mar-t-3-xs

u-mar-t-4-xs

u-mar-t-5-xs

<div class="u-mar-t-0-xs">u-mar-t-0-xs</div>
<div class="u-mar-t-h-xs">u-mar-t-h-xs</div>
<div class="u-mar-t-1-xs">u-mar-t-1-xs</div>
<div class="u-mar-t-2-xs">u-mar-t-2-xs</div>
<div class="u-mar-t-3-xs">u-mar-t-3-xs</div>
<div class="u-mar-t-4-xs">u-mar-t-4-xs</div>
<div class="u-mar-t-5-xs">u-mar-t-5-xs</div>

margin-top: sm only

u-mar-t-0-sm

u-mar-t-h-sm

u-mar-t-1-sm

u-mar-t-2-sm

u-mar-t-3-sm

u-mar-t-4-sm

u-mar-t-5-sm

<div class="u-mar-t-0-sm">u-mar-t-0-sm</div>
<div class="u-mar-t-h-sm">u-mar-t-h-sm</div>
<div class="u-mar-t-1-sm">u-mar-t-1-sm</div>
<div class="u-mar-t-2-sm">u-mar-t-2-sm</div>
<div class="u-mar-t-3-sm">u-mar-t-3-sm</div>
<div class="u-mar-t-4-sm">u-mar-t-4-sm</div>
<div class="u-mar-t-5-sm">u-mar-t-5-sm</div>

margin-top: md only

u-mar-t-0-md

u-mar-t-h-md

u-mar-t-1-md

u-mar-t-2-md

u-mar-t-3-md

u-mar-t-4-md

u-mar-t-5-md

<div class="u-mar-t-0-md">u-mar-t-0-md</div>
<div class="u-mar-t-h-md">u-mar-t-h-md</div>
<div class="u-mar-t-1-md">u-mar-t-1-md</div>
<div class="u-mar-t-2-md">u-mar-t-2-md</div>
<div class="u-mar-t-3-md">u-mar-t-3-md</div>
<div class="u-mar-t-4-md">u-mar-t-4-md</div>
<div class="u-mar-t-5-md">u-mar-t-5-md</div>

margin-top: lg only

u-mar-t-0-lg

u-mar-t-h-lg

u-mar-t-1-lg

u-mar-t-2-lg

u-mar-t-3-lg

u-mar-t-4-lg

u-mar-t-5-lg

<div class="u-mar-t-0-lg">u-mar-t-0-lg</div>
<div class="u-mar-t-h-lg">u-mar-t-h-lg</div>
<div class="u-mar-t-1-lg">u-mar-t-1-lg</div>
<div class="u-mar-t-2-lg">u-mar-t-2-lg</div>
<div class="u-mar-t-3-lg">u-mar-t-3-lg</div>
<div class="u-mar-t-4-lg">u-mar-t-4-lg</div>
<div class="u-mar-t-5-lg">u-mar-t-5-lg</div>

margin-right: all sizes

u-mar-r-0

u-mar-r-h

u-mar-r-1

u-mar-r-2

u-mar-r-3

u-mar-r-4

u-mar-r-5

<div class="u-mar-r-0">u-mar-r-0</div>
<div class="u-mar-r-h">u-mar-r-h</div>
<div class="u-mar-r-1">u-mar-r-1</div>
<div class="u-mar-r-2">u-mar-r-2</div>
<div class="u-mar-r-3">u-mar-r-3</div>
<div class="u-mar-r-4">u-mar-r-4</div>
<div class="u-mar-r-5">u-mar-r-5</div>

margin-right: xs only

u-mar-r-0-xs

u-mar-r-h-xs

u-mar-r-1-xs

u-mar-r-2-xs

u-mar-r-3-xs

u-mar-r-4-xs

u-mar-r-5-xs

<div class="u-mar-r-0-xs">u-mar-r-0-xs</div>
<div class="u-mar-r-h-xs">u-mar-r-h-xs</div>
<div class="u-mar-r-1-xs">u-mar-r-1-xs</div>
<div class="u-mar-r-2-xs">u-mar-r-2-xs</div>
<div class="u-mar-r-3-xs">u-mar-r-3-xs</div>
<div class="u-mar-r-4-xs">u-mar-r-4-xs</div>
<div class="u-mar-r-5-xs">u-mar-r-5-xs</div>

margin-right: sm only

u-mar-r-0-sm

u-mar-r-h-sm

u-mar-r-1-sm

u-mar-r-2-sm

u-mar-r-3-sm

u-mar-r-4-sm

u-mar-r-5-sm

<div class="u-mar-r-0-sm">u-mar-r-0-sm</div>
<div class="u-mar-r-h-sm">u-mar-r-h-sm</div>
<div class="u-mar-r-1-sm">u-mar-r-1-sm</div>
<div class="u-mar-r-2-sm">u-mar-r-2-sm</div>
<div class="u-mar-r-3-sm">u-mar-r-3-sm</div>
<div class="u-mar-r-4-sm">u-mar-r-4-sm</div>
<div class="u-mar-r-5-sm">u-mar-r-5-sm</div>

margin-right: md only

u-mar-r-0-md

u-mar-r-h-md

u-mar-r-1-md

u-mar-r-2-md

u-mar-r-3-md

u-mar-r-4-md

u-mar-r-5-md

<div class="u-mar-r-0-md">u-mar-r-0-md</div>
<div class="u-mar-r-h-md">u-mar-r-h-md</div>
<div class="u-mar-r-1-md">u-mar-r-1-md</div>
<div class="u-mar-r-2-md">u-mar-r-2-md</div>
<div class="u-mar-r-3-md">u-mar-r-3-md</div>
<div class="u-mar-r-4-md">u-mar-r-4-md</div>
<div class="u-mar-r-5-md">u-mar-r-5-md</div>

margin-right: lg only

u-mar-r-0-lg

u-mar-r-h-lg

u-mar-r-1-lg

u-mar-r-2-lg

u-mar-r-3-lg

u-mar-r-4-lg

u-mar-r-5-lg

<div class="u-mar-r-0-lg">u-mar-r-0-lg</div>
<div class="u-mar-r-h-lg">u-mar-r-h-lg</div>
<div class="u-mar-r-1-lg">u-mar-r-1-lg</div>
<div class="u-mar-r-2-lg">u-mar-r-2-lg</div>
<div class="u-mar-r-3-lg">u-mar-r-3-lg</div>
<div class="u-mar-r-4-lg">u-mar-r-4-lg</div>
<div class="u-mar-r-5-lg">u-mar-r-5-lg</div>

margin-bottom: all sizes

u-mar-b-0

u-mar-b-h

u-mar-b-1

u-mar-b-2

u-mar-b-3

u-mar-b-4

u-mar-b-5

<div class="u-mar-b-0">u-mar-b-0</div>
<div class="u-mar-b-h">u-mar-b-h</div>
<div class="u-mar-b-1">u-mar-b-1</div>
<div class="u-mar-b-2">u-mar-b-2</div>
<div class="u-mar-b-3">u-mar-b-3</div>
<div class="u-mar-b-4">u-mar-b-4</div>
<div class="u-mar-b-5">u-mar-b-5</div>

margin-bottom: xs only

u-mar-b-0-xs

u-mar-b-h-xs

u-mar-b-1-xs

u-mar-b-2-xs

u-mar-b-3-xs

u-mar-b-4-xs

u-mar-b-5-xs

<div class="u-mar-b-0-xs">u-mar-b-0-xs</div>
<div class="u-mar-b-h-xs">u-mar-b-h-xs</div>
<div class="u-mar-b-1-xs">u-mar-b-1-xs</div>
<div class="u-mar-b-2-xs">u-mar-b-2-xs</div>
<div class="u-mar-b-3-xs">u-mar-b-3-xs</div>
<div class="u-mar-b-4-xs">u-mar-b-4-xs</div>
<div class="u-mar-b-5-xs">u-mar-b-5-xs</div>

margin-bottom: sm only

u-mar-b-0-sm

u-mar-b-h-sm

u-mar-b-1-sm

u-mar-b-2-sm

u-mar-b-3-sm

u-mar-b-4-sm

u-mar-b-5-sm

<div class="u-mar-b-0-sm">u-mar-b-0-sm</div>
<div class="u-mar-b-h-sm">u-mar-b-h-sm</div>
<div class="u-mar-b-1-sm">u-mar-b-1-sm</div>
<div class="u-mar-b-2-sm">u-mar-b-2-sm</div>
<div class="u-mar-b-3-sm">u-mar-b-3-sm</div>
<div class="u-mar-b-4-sm">u-mar-b-4-sm</div>
<div class="u-mar-b-5-sm">u-mar-b-5-sm</div>

margin-bottom: md only

u-mar-b-0-md

u-mar-b-h-md

u-mar-b-1-md

u-mar-b-2-md

u-mar-b-3-md

u-mar-b-4-md

u-mar-b-5-md

<div class="u-mar-b-0-md">u-mar-b-0-md</div>
<div class="u-mar-b-h-md">u-mar-b-h-md</div>
<div class="u-mar-b-1-md">u-mar-b-1-md</div>
<div class="u-mar-b-2-md">u-mar-b-2-md</div>
<div class="u-mar-b-3-md">u-mar-b-3-md</div>
<div class="u-mar-b-4-md">u-mar-b-4-md</div>
<div class="u-mar-b-5-md">u-mar-b-5-md</div>

margin-bottom: lg only

u-mar-b-0-lg

u-mar-b-h-lg

u-mar-b-1-lg

u-mar-b-2-lg

u-mar-b-3-lg

u-mar-b-4-lg

u-mar-b-5-lg

<div class="u-mar-b-0-lg">u-mar-b-0-lg</div>
<div class="u-mar-b-h-lg">u-mar-b-h-lg</div>
<div class="u-mar-b-1-lg">u-mar-b-1-lg</div>
<div class="u-mar-b-2-lg">u-mar-b-2-lg</div>
<div class="u-mar-b-3-lg">u-mar-b-3-lg</div>
<div class="u-mar-b-4-lg">u-mar-b-4-lg</div>
<div class="u-mar-b-5-lg">u-mar-b-5-lg</div>

margin-left: all sizes

u-mar-l-0

u-mar-l-h

u-mar-l-1

u-mar-l-2

u-mar-l-3

u-mar-l-4

u-mar-l-5

<div class="u-mar-l-0">u-mar-l-0</div>
<div class="u-mar-l-h">u-mar-l-h</div>
<div class="u-mar-l-1">u-mar-l-1</div>
<div class="u-mar-l-2">u-mar-l-2</div>
<div class="u-mar-l-3">u-mar-l-3</div>
<div class="u-mar-l-4">u-mar-l-4</div>
<div class="u-mar-l-5">u-mar-l-5</div>

margin-left: xs only

u-mar-l-0-xs

u-mar-l-h-xs

u-mar-l-1-xs

u-mar-l-2-xs

u-mar-l-3-xs

u-mar-l-4-xs

u-mar-l-5-xs

<div class="u-mar-l-0-xs">u-mar-l-0-xs</div>
<div class="u-mar-l-h-xs">u-mar-l-h-xs</div>
<div class="u-mar-l-1-xs">u-mar-l-1-xs</div>
<div class="u-mar-l-2-xs">u-mar-l-2-xs</div>
<div class="u-mar-l-3-xs">u-mar-l-3-xs</div>
<div class="u-mar-l-4-xs">u-mar-l-4-xs</div>
<div class="u-mar-l-5-xs">u-mar-l-5-xs</div>

margin-left: sm only

u-mar-l-0-sm

u-mar-l-h-sm

u-mar-l-1-sm

u-mar-l-2-sm

u-mar-l-3-sm

u-mar-l-4-sm

u-mar-l-5-sm

<div class="u-mar-l-0-sm">u-mar-l-0-sm</div>
<div class="u-mar-l-h-sm">u-mar-l-h-sm</div>
<div class="u-mar-l-1-sm">u-mar-l-1-sm</div>
<div class="u-mar-l-2-sm">u-mar-l-2-sm</div>
<div class="u-mar-l-3-sm">u-mar-l-3-sm</div>
<div class="u-mar-l-4-sm">u-mar-l-4-sm</div>
<div class="u-mar-l-5-sm">u-mar-l-5-sm</div>

margin-left: md only

u-mar-l-0-md

u-mar-l-h-md

u-mar-l-1-md

u-mar-l-2-md

u-mar-l-3-md

u-mar-l-4-md

u-mar-l-5-md

<div class="u-mar-l-0-md">u-mar-l-0-md</div>
<div class="u-mar-l-h-md">u-mar-l-h-md</div>
<div class="u-mar-l-1-md">u-mar-l-1-md</div>
<div class="u-mar-l-2-md">u-mar-l-2-md</div>
<div class="u-mar-l-3-md">u-mar-l-3-md</div>
<div class="u-mar-l-4-md">u-mar-l-4-md</div>
<div class="u-mar-l-5-md">u-mar-l-5-md</div>

margin-left: lg only

u-mar-l-0-lg

u-mar-l-h-lg

u-mar-l-1-lg

u-mar-l-2-lg

u-mar-l-3-lg

u-mar-l-4-lg

u-mar-l-5-lg

<div class="u-mar-l-0-lg">u-mar-l-0-lg</div>
<div class="u-mar-l-h-lg">u-mar-l-h-lg</div>
<div class="u-mar-l-1-lg">u-mar-l-1-lg</div>
<div class="u-mar-l-2-lg">u-mar-l-2-lg</div>
<div class="u-mar-l-3-lg">u-mar-l-3-lg</div>
<div class="u-mar-l-4-lg">u-mar-l-4-lg</div>
<div class="u-mar-l-5-lg">u-mar-l-5-lg</div>

margin-x (margin-left and margin-right): all sizes

u-mar-x-0

u-mar-x-h

u-mar-x-1

u-mar-x-2

u-mar-x-3

u-mar-x-4

u-mar-x-5

<div class="u-mar-x-0">u-mar-x-0</div>
<div class="u-mar-x-h">u-mar-x-h</div>
<div class="u-mar-x-1">u-mar-x-1</div>
<div class="u-mar-x-2">u-mar-x-2</div>
<div class="u-mar-x-3">u-mar-x-3</div>
<div class="u-mar-x-4">u-mar-x-4</div>
<div class="u-mar-x-5">u-mar-x-5</div>

margin-x (margin-left and margin-right): xs only

u-mar-x-0-xs

u-mar-x-h-xs

u-mar-x-1-xs

u-mar-x-2-xs

u-mar-x-3-xs

u-mar-x-4-xs

u-mar-x-5-xs

<div class="u-mar-x-0-xs">u-mar-x-0-xs</div>
<div class="u-mar-x-h-xs">u-mar-x-h-xs</div>
<div class="u-mar-x-1-xs">u-mar-x-1-xs</div>
<div class="u-mar-x-2-xs">u-mar-x-2-xs</div>
<div class="u-mar-x-3-xs">u-mar-x-3-xs</div>
<div class="u-mar-x-4-xs">u-mar-x-4-xs</div>
<div class="u-mar-x-5-xs">u-mar-x-5-xs</div>

margin-x (margin-left and margin-right): sm only

u-mar-x-0-sm

u-mar-x-h-sm

u-mar-x-1-sm

u-mar-x-2-sm

u-mar-x-3-sm

u-mar-x-4-sm

u-mar-x-5-sm

<div class="u-mar-x-0-sm">u-mar-x-0-sm</div>
<div class="u-mar-x-h-sm">u-mar-x-h-sm</div>
<div class="u-mar-x-1-sm">u-mar-x-1-sm</div>
<div class="u-mar-x-2-sm">u-mar-x-2-sm</div>
<div class="u-mar-x-3-sm">u-mar-x-3-sm</div>
<div class="u-mar-x-4-sm">u-mar-x-4-sm</div>
<div class="u-mar-x-5-sm">u-mar-x-5-sm</div>

margin-x (margin-left and margin-right): md only

u-mar-x-0-md

u-mar-x-h-md

u-mar-x-1-md

u-mar-x-2-md

u-mar-x-3-md

u-mar-x-4-md

u-mar-x-5-md

<div class="u-mar-x-0-md">u-mar-x-0-md</div>
<div class="u-mar-x-h-md">u-mar-x-h-md</div>
<div class="u-mar-x-1-md">u-mar-x-1-md</div>
<div class="u-mar-x-2-md">u-mar-x-2-md</div>
<div class="u-mar-x-3-md">u-mar-x-3-md</div>
<div class="u-mar-x-4-md">u-mar-x-4-md</div>
<div class="u-mar-x-5-md">u-mar-x-5-md</div>

margin-x (margin-left and margin-right): lg only

u-mar-x-0-lg

u-mar-x-h-lg

u-mar-x-1-lg

u-mar-x-2-lg

u-mar-x-3-lg

u-mar-x-4-lg

u-mar-x-5-lg


<div class="u-mar-x-0-lg">u-mar-x-0-lg</div>
<div class="u-mar-x-h-lg">u-mar-x-h-lg</div>
<div class="u-mar-x-1-lg">u-mar-x-1-lg</div>
<div class="u-mar-x-2-lg">u-mar-x-2-lg</div>
<div class="u-mar-x-3-lg">u-mar-x-3-lg</div>
<div class="u-mar-x-4-lg">u-mar-x-3-lg</div>
<div class="u-mar-x-5-lg">u-mar-x-5-lg</div>

margin-y (margin-top and margin-bottom): all sizes

u-mar-y-0

u-mar-y-h

u-mar-y-1

u-mar-y-2

u-mar-y-3

u-mar-y-4

u-mar-y-5

<div class="u-mar-y-0">u-mar-y-0</div>
<div class="u-mar-y-h">u-mar-y-h</div>
<div class="u-mar-y-1">u-mar-y-1</div>
<div class="u-mar-y-2">u-mar-y-2</div>
<div class="u-mar-y-3">u-mar-y-3</div>
<div class="u-mar-y-4">u-mar-y-4</div>
<div class="u-mar-y-5">u-mar-y-5</div>

margin-y (margin-top and margin-bottom): xs only

u-mar-y-0-xs

u-mar-y-h-xs

u-mar-y-1-xs

u-mar-y-2-xs

u-mar-y-3-xs

u-mar-y-4-xs

u-mar-y-5-xs

<div class="u-mar-y-0-xs">u-mar-y-0-xs</div>
<div class="u-mar-y-h-xs">u-mar-y-h-xs</div>
<div class="u-mar-y-1-xs">u-mar-y-1-xs</div>
<div class="u-mar-y-2-xs">u-mar-y-2-xs</div>
<div class="u-mar-y-3-xs">u-mar-y-3-xs</div>
<div class="u-mar-y-4-xs">u-mar-y-4-xs</div>
<div class="u-mar-y-5-xs">u-mar-y-5-xs</div>

margin-y (margin-top and margin-bottom): sm only

u-mar-y-0-sm

u-mar-y-h-sm

u-mar-y-1-sm

u-mar-y-2-sm

u-mar-y-3-sm

u-mar-y-4-sm

u-mar-y-5-sm

<div class="u-mar-y-0-sm">u-mar-y-0-sm</div>
<div class="u-mar-y-h-sm">u-mar-y-h-sm</div>
<div class="u-mar-y-1-sm">u-mar-y-1-sm</div>
<div class="u-mar-y-2-sm">u-mar-y-2-sm</div>
<div class="u-mar-y-3-sm">u-mar-y-3-sm</div>
<div class="u-mar-y-4-sm">u-mar-y-4-sm</div>
<div class="u-mar-y-5-sm">u-mar-y-5-sm</div>

margin-y (margin-top and margin-bottom): md only

u-mar-y-0-md

u-mar-y-h-md

u-mar-y-1-md

u-mar-y-2-md

u-mar-y-3-md

u-mar-y-4-md

u-mar-y-5-md

<div class="u-mar-y-0-md">u-mar-y-0-md</div>
<div class="u-mar-y-h-md">u-mar-y-h-md</div>
<div class="u-mar-y-1-md">u-mar-y-1-md</div>
<div class="u-mar-y-2-md">u-mar-y-2-md</div>
<div class="u-mar-y-3-md">u-mar-y-3-md</div>
<div class="u-mar-y-4-md">u-mar-y-4-md</div>
<div class="u-mar-y-5-md">u-mar-y-5-md</div>

margin-y (margin-top and margin-bottom): lg only

u-mar-y-0-lg

u-mar-y-h-lg

u-mar-y-1-lg

u-mar-y-2-lg

u-mar-y-3-lg

u-mar-y-4-lg

u-mar-y-5-lg

<div class="u-mar-y-0-lg">u-mar-y-0-lg</div>
<div class="u-mar-y-h-lg">u-mar-y-h-lg</div>
<div class="u-mar-y-1-lg">u-mar-y-1-lg</div>
<div class="u-mar-y-2-lg">u-mar-y-2-lg</div>
<div class="u-mar-y-3-lg">u-mar-y-3-lg</div>
<div class="u-mar-y-4-lg">u-mar-y-4-lg</div>
<div class="u-mar-y-5-lg">u-mar-y-5-lg</div>

Utility classes