## Object | Margin

### Margin All

`.margin--xs`
`.margin--sm`
`.margin--md`
`.margin--lg`
`.margin--xl`
HTML

    <div class="">

                <div class="demo__box margin--xs">
                    <code>.margin--xs</code>
                </div>

                <div class="demo__box margin--sm">
                    <code>.margin--sm</code>
                </div>

                <div class="demo__box margin--md">
                    <code>.margin--md</code>
                </div>

                <div class="demo__box margin--lg">
                    <code>.margin--lg</code>
                </div>

                <div class="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="demo__box margin--md_top">
                    <code>.margin--md_top</code>
                </div>
                <div class="demo__box margin--xl_top">
                    <code>.margin--xl_top</code>
                </div>

                <div class="demo__box margin--md_right">
                    <code>.margin--md_right</code>
                </div>
                <div class="demo__box margin--xl_right">
                    <code>.margin--xl_right</code>
                </div>

                <div class="demo__box margin--md_bottom">
                    <code>.margin--md_bottom</code>
                </div>
                <div class="demo__box margin--xl_bottom">
                    <code>.margin--xl_bottom</code>
                </div>

                <div class="demo__box margin--md_left">
                    <code>.margin--md_left</code>
                </div>
                <div class="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="demo__box margin--sm_vertical">
                    <code>.margin--sm_vertical</code>
                </div>
                <div class="demo__box margin--md_vertical">
                    <code>.margin--md_vertical</code>
                </div>
                <div class="demo__box margin--xl_vertical">
                    <code>.margin--xl_vertical</code>
                </div>

                <div class="demo__box margin--sm_horizontal">
                    <code>.margin--sm_horizontal</code>
                </div>
                <div class="demo__box margin--md_horizontal">
                    <code>.margin--md_horizontal</code>
                </div>
                <div class="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="demo__stack">
                <div class="demo__box margin--md">
                    <code>.margin--md</code>
                </div>
                <div class="demo__box margin--md_vertical">
                    <code>.margin--md_vertical</code>
                </div>
                <div class="demo__box margin--sm_horizontal">
                    <code>.margin--sm_horizontal</code>
                </div>
                <div class="demo__box 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="demo__box margin--1">
                    <code>.margin--1</code>
                </div>

                <div class="demo__box margin--4">
                    <code>.margin--4</code>
                </div>

                <div class="demo__box margin--8">
                    <code>.margin--8</code>
                </div>

                <div class="demo__box margin--12">
                    <code>.margin--12</code>
                </div>

                <div class="demo__box margin--16">
                    <code>.margin--16</code>
                </div>

                <div class="demo__box margin--24">
                    <code>.margin--24</code>
                </div>

                <div class="demo__box margin--32">
                    <code>.margin--32</code>
                </div>

                <div class="demo__box margin--48">
                    <code>.margin--48</code>
                </div>

                <div class="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="demo__box margin--24_top">
                    <code>.margin--24_top</code>
                </div>
                <div class="demo__box margin--48_top">
                    <code>.margin--48_top</code>
                </div>

                <div class="demo__box margin--24_right">
                    <code>.margin--24_right</code>
                </div>
                <div class="demo__box margin--48_right">
                    <code>.margin--48_right</code>
                </div>

                <div class="demo__box margin--24_bottom">
                    <code>.margin--24_bottom</code>
                </div>
                <div class="demo__box margin--48_bottom">
                    <code>.margin--48_bottom</code>
                </div>

                <div class="demo__box margin--24_left">
                    <code>.margin--24_left</code>
                </div>
                <div class="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="demo__box margin--12_vertical">
                    <code>.margin--12_vertical</code>
                </div>
                <div class="demo__box margin--32_vertical">
                    <code>.margin--32_vertical</code>
                </div>
                <div class="demo__box margin--64_vertical">
                    <code>.margin--64_vertical</code>
                </div>

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

            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!