3.5.1 #Layout.spacing.margins Margins

Toggle example guides Toggle HTML markup

Classes that apply differently sized margins to your elements. The available directions are top, bottom, left, right, vertical, horizontal. The available sizes ranges from xs to xl. The default class sb-margin adds the medium sized margin to all sides.

.sb-margin-bottom-xs
.sb-margin-bottom-s
.sb-margin-bottom
.sb-margin-bottom-l
.sb-margin-bottom-xl
Markup
<div class="sb-tile sb-margin-bottom-xs sb-padding">
  .sb-margin-bottom-xs
</div>
<div class="sb-tile sb-margin-bottom-s sb-padding">
  .sb-margin-bottom-s
</div>
<div class="sb-tile sb-margin-bottom sb-padding">
  .sb-margin-bottom
</div>
<div class="sb-tile sb-margin-bottom-l sb-padding">
  .sb-margin-bottom-l
</div>
<div class="sb-tile sb-margin-bottom-xl sb-padding">
  .sb-margin-bottom-xl
</div>
Source: layout/_spacing.scss, line 9