Core Framework v1.3.0 – Documentation

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

Margins

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

Elements with margins (Backgrounds added for demonstrational purposes)
<div>
    Upper Element
</div>
<div class="float-left one-fourth">
    Left-hand element
</div>
<div class="float-left one-third margin-s">
    Small margin on all sides
</div>
<div class="float-left one-fourth">
    Right-hand element
</div>
<div class="clear-both">
    Bottom element
</div>
Upper Element
Left-hand element
Right-hand element
Bottom element
<div class="float-left one-third margin-right">
    Standard margin to the right
</div>
<div class="float-left one-third">
    Right-hand element
</div>
<div>
    Top element
</div>
<div class="margin-vertical-xs">
    Extra-small vertical margins
</div>
<div>
    Bottom element
</div>
Top element
Extra-small vertical margins
Bottom element

Paddings

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

Elements with paddings (Borders and backgrounds added for demonstrational purposes)
<div class="padding">
    <p>
        Element with standard padding
        on all sides
    </p>
</div>

Element with standard padding on all sides

<div class="padding-left-xl">
    <p>
        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">
    <p>
        Element with small vertical padding
        and large horizontal padding
    </p>
</div>

Element with small vertical padding and large horizontal padding