Margin

When to use it

The Margin utility is used to add or remove margins around elements, e.g. when some extra space is needed between two components. It provides a way to control the spacing between elements where the default margins aren't enough – or too much.

Variants

• General Margin: Use the .u-margin--[small|medium|large] classes to add small to large margins around any element.
• Directional Margin: Use the .u-margin-[top|right|bottom|left]--[small|medium|large] classes to add top, right, bottom, or left margin on any element.
• Remove Margin: Use the .u-margin-[top|right|bottom|left]--none classes to remove margins on any element.
• Auto Margin: Use the .u-margin-[right|left]--auto classes to add left or right auto margin on any element (e.g., to horizontally align flexbox elements within its parent).

What it looks like

Code examples

Top

<div class="u-margin-top--none">top--none</div>
<div class="u-margin-top--small">top--small</div>
<div class="u-margin-top--medium">top--medium</div>
<div class="u-margin-top--large">top--large</div>

Bottom

<div class="u-margin-bottom--none">bottom--none</div>
<div class="u-margin-bottom--small">bottom--small</div>
<div class="u-margin-bottom--medium">bottom--medium</div>
<div class="u-margin-bottom--large">bottom--large</div>

Right

<div class="u-margin-right--none">right--none</div>
<div class="u-margin-right--small">right--small</div>
<div class="u-margin-right--medium">right--medium</div>
<div class="u-margin-right--large">right--large</div>

Left

<div class="u-margin-left--none">left--none</div>
<div class="u-margin-left--small">left--small</div>
<div class="u-margin-left--medium">left--medium</div>
<div class="u-margin-left--large">left--large</div>