Spacing

HTML block elements can receive inward and outward spacings, called margins and paddings. They control either the distance between two sibling elements, or the padding between a parent element's outer boundaries and its child elements.

  1. Syntax
  2. Margins
  3. Paddings

Syntax

The full syntax for all spacing classes is <spacing-type>-<side>-<size>, as in margin-bottom-xs or padding-left-xl.
Omitting the side will give you the specified margin on all four sides (e.g. margin-xl, padding-s).

You can also apply a standard spacing by leaving out the size. That is, margin-right will give you a standard-sized margin to the right, and padding will give you a standard-sized padding on all four sides.

Using none for size will reset any existing margins or paddings on the specified side to zero.

Legend

Spacing Type
  • margin
  • padding
Side
  • top
  • bottom
  • left
  • right
  • vertical
  • horizontal
Size
  • none
  • xs
  • s
  • m
  • l
  • xl
  • xxl

Margins

Applying a margin to an element will move it away from its neighboring elements.

Elements with margins
<div class="demo-box-3">&nbsp;</div>
<div class="float-left one-fourth demo-box-2">&nbsp;</div>
<div class="margin-s float-left one-third demo-box-1">
    Small margin on all sides
</div>
<div class="float-left one-fourth demo-box-2">&nbsp;</div>
<div class="clear-both demo-box-4">&nbsp;</div>
 
 
Small margin on all sides
 
 
<div class="margin-right float-left one-third demo-box-1">
    Standard margin to the right
</div>
<div class="float-left one-third demo-box-2">&nbsp;</div>
Standard margin to the right
 
<div class="demo-box-2">&nbsp;</div>
<div class="margin-vertical-xs demo-box-1">
    Extra-small vertical margins
</div>
<div class="demo-box-3"> </div>
 
Extra-small vertical margins
 

Paddings

Applying a padding to an element will put space between its outer edge and its child elements.

Elements with paddings
<div class="padding demo-box-2">
    <p class="demo-box-1">
        Element with standard padding
        on all sides
    </p>
</div>

Element with standard padding on all sides 

<div class="padding-left-xl demo-box-2">
    <p class="demo-box-1">
        Element with extra-large padding
        on the left
    </p>
</div>

Element with extra-large padding on the left 

<div class="padding-vertical-s padding-horizontal-l demo-box-2">
    <p class="demo-box-1">
        Element with small vertical padding
        and large horizontal padding
    </p>
</div>

Element with small vertical padding and large horizontal padding