Spacings

Spacings are length in pixels that are used for paddings, margins and positioning (top, right, bottom, left).

    <div class="spacing" style="padding:120px">
        <div class="content">xxl 120px <div class="length" style="width:120px"></div></div>
    </div>
    <div class="spacing" style="padding:70px">
        <div class="content">xl 70px <div class="length" style="width:70px"></div></div>
    </div>
    <div class="spacing" style="padding:40px">
        <div class="content">lg 40px <div class="length" style="width:40px"></div></div>
    </div>
    <div class="spacing" style="padding:30px">
        <div class="content">md 30px <div class="length" style="width:30px"></div></div>
    </div>
    <div class="spacing" style="padding:16px">
        <div class="content">sm 16px <div class="length" style="width:16px"></div></div>
    </div>
    <div class="spacing" style="padding:10px">
        <div class="content">xs 10px <div class="length" style="width:10px"></div></div>
    </div>
    <div class="spacing" style="padding:5px">
        <div class="content">xxs 5px <div class="length" style="width:5px"></div></div>
    </div>
    <div class="spacing" style="padding:0px">
        <div class="content">none 0px <div class="length" style="width:0px"></div></div>
    </div>
    <!-- DEMO ONLY -->
    <style>
        body{padding:1em}
        .spacing{background:fuchsia;margin-bottom:1em}
        .content{background:white;padding:1em}
        .length{border-bottom:2px solid fuchsia;}
    </style>