Object | Margin

Margin All

.margin--xs
.margin--sm
.margin--md
.margin--lg
.margin--xl
HTML 
<div class="">
            
            <div class="ss-c-demo__box margin--xs">
                <code>.margin--xs</code>
            </div>
            
            <div class="ss-c-demo__box margin--sm">
                <code>.margin--sm</code>
            </div>
            
            <div class="ss-c-demo__box margin--md">
                <code>.margin--md</code>
            </div>
            
            <div class="ss-c-demo__box margin--lg">
                <code>.margin--lg</code>
            </div>
            
            <div class="ss-c-demo__box margin--xl">
                <code>.margin--xl</code>
            </div>
            
        </div>

Margin Sides

.margin--md_top
.margin--xl_top
.margin--md_right
.margin--xl_right
.margin--md_bottom
.margin--xl_bottom
.margin--md_left
.margin--xl_left
HTML 
<div class="">
            
            <div class="ss-c-demo__box margin--md_top">
                <code>.margin--md_top</code>
            </div>
            <div class="ss-c-demo__box margin--xl_top">
                <code>.margin--xl_top</code>
            </div>
            
            <div class="ss-c-demo__box margin--md_right">
                <code>.margin--md_right</code>
            </div>
            <div class="ss-c-demo__box margin--xl_right">
                <code>.margin--xl_right</code>
            </div>
            
            <div class="ss-c-demo__box margin--md_bottom">
                <code>.margin--md_bottom</code>
            </div>
            <div class="ss-c-demo__box margin--xl_bottom">
                <code>.margin--xl_bottom</code>
            </div>
            
            <div class="ss-c-demo__box margin--md_left">
                <code>.margin--md_left</code>
            </div>
            <div class="ss-c-demo__box margin--xl_left">
                <code>.margin--xl_left</code>
            </div>
            
        </div>

Margin Axes

.margin--sm_vertical
.margin--md_vertical
.margin--xl_vertical
.margin--sm_horizontal
.margin--md_horizontal
.margin--xl_horizontal
HTML 
<div class="">
            
            <div class="ss-c-demo__box margin--sm_vertical">
                <code>.margin--sm_vertical</code>
            </div>
            <div class="ss-c-demo__box margin--md_vertical">
                <code>.margin--md_vertical</code>
            </div>
            <div class="ss-c-demo__box margin--xl_vertical">
                <code>.margin--xl_vertical</code>
            </div>
            
            <div class="ss-c-demo__box margin--sm_horizontal">
                <code>.margin--sm_horizontal</code>
            </div>
            <div class="ss-c-demo__box margin--md_horizontal">
                <code>.margin--md_horizontal</code>
            </div>
            <div class="ss-c-demo__box margin--xl_horizontal">
                <code>.margin--xl_horizontal</code>
            </div>
            
        </div>

Mixed Examples

.margin--md
.margin--md_vertical
.margin--sm_horizontal
.margin--lg_left
HTML 
<div class="ss-c-demo__stack">
            <div class="ss-c-demo__box ss-c-margin--md">
                <code>.margin--md</code>
            </div>
            <div class="ss-c-demo__box ss-c-margin--md_vertical">
                <code>.margin--md_vertical</code>
            </div>
            <div class="ss-c-demo__box ss-c-margin--sm_horizontal">
                <code>.margin--sm_horizontal</code>
            </div>
            <div class="ss-c-demo__box ss-c-margin--lg_left">
                <code>.margin--lg_left</code>
            </div>
        </div>

Numeric Margin (q: 1–1000)

All Sides

.margin--1
.margin--4
.margin--8
.margin--12
.margin--16
.margin--24
.margin--32
.margin--48
.margin--64
HTML 
<div class="">
            
            <div class="ss-c-demo__box margin--1">
                <code>.margin--1</code>
            </div>
            
            <div class="ss-c-demo__box margin--4">
                <code>.margin--4</code>
            </div>
            
            <div class="ss-c-demo__box margin--8">
                <code>.margin--8</code>
            </div>
            
            <div class="ss-c-demo__box margin--12">
                <code>.margin--12</code>
            </div>
            
            <div class="ss-c-demo__box margin--16">
                <code>.margin--16</code>
            </div>
            
            <div class="ss-c-demo__box margin--24">
                <code>.margin--24</code>
            </div>
            
            <div class="ss-c-demo__box margin--32">
                <code>.margin--32</code>
            </div>
            
            <div class="ss-c-demo__box margin--48">
                <code>.margin--48</code>
            </div>
            
            <div class="ss-c-demo__box margin--64">
                <code>.margin--64</code>
            </div>
            
        </div>

Sides

.margin--24_top
.margin--48_top
.margin--24_right
.margin--48_right
.margin--24_bottom
.margin--48_bottom
.margin--24_left
.margin--48_left
HTML 
<div class="">
            
            <div class="ss-c-demo__box margin--24_top">
                <code>.margin--24_top</code>
            </div>
            <div class="ss-c-demo__box margin--48_top">
                <code>.margin--48_top</code>
            </div>
            
            <div class="ss-c-demo__box margin--24_right">
                <code>.margin--24_right</code>
            </div>
            <div class="ss-c-demo__box margin--48_right">
                <code>.margin--48_right</code>
            </div>
            
            <div class="ss-c-demo__box margin--24_bottom">
                <code>.margin--24_bottom</code>
            </div>
            <div class="ss-c-demo__box margin--48_bottom">
                <code>.margin--48_bottom</code>
            </div>
            
            <div class="ss-c-demo__box margin--24_left">
                <code>.margin--24_left</code>
            </div>
            <div class="ss-c-demo__box margin--48_left">
                <code>.margin--48_left</code>
            </div>
            
        </div>

Axes

.margin--12_vertical
.margin--32_vertical
.margin--64_vertical
.margin--12_horizontal
.margin--32_horizontal
.margin--64_horizontal
HTML 
<div class="">
            
            <div class="ss-c-demo__box margin--12_vertical">
                <code>.margin--12_vertical</code>
            </div>
            <div class="ss-c-demo__box margin--32_vertical">
                <code>.margin--32_vertical</code>
            </div>
            <div class="ss-c-demo__box margin--64_vertical">
                <code>.margin--64_vertical</code>
            </div>
            
            <div class="ss-c-demo__box margin--12_horizontal">
                <code>.margin--12_horizontal</code>
            </div>
            <div class="ss-c-demo__box margin--32_horizontal">
                <code>.margin--32_horizontal</code>
            </div>
            <div class="ss-c-demo__box margin--64_horizontal">
                <code>.margin--64_horizontal</code>
            </div>
            
        </div>