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.
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.
<div class="demo-box-3"> </div> <div class="float-left one-fourth demo-box-2"> </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"> </div> <div class="clear-both demo-box-4"> </div>
<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"> </div>
<div class="demo-box-2"> </div> <div class="margin-vertical-xs demo-box-1"> Extra-small vertical margins </div> <div class="demo-box-3"> </div>
Paddings
Applying a padding to an element will put space between its outer edge and its child elements.
<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