Space

<style>
    .color-box {
        border: 1px solid #ccc;
        width: 64px;
        height: 64px;
        display: inline-block;
    }
</style>
<div class="h2_guide-title">Space Margin</div>
<p><code>.is-margin</code>,<code>.is-margin-top-{$key}</code>,<code>.is-margin-right-{$key}</code>,<code>.is-margin-bottom-{$key}</code>,<code>.is-margin-left-{$key}</code>,<code>.is-margin-s-{$key}</code>,<code>.is-margin-v-{$key}</code><br><small>{$key} = [xxs,xs,sm,md,lg,xl,xxl]</small></p>

<span class="color-box yui-space is-margin-top-xxs"></span>
<span class="color-box yui-space is-margin-right-xs"></span>
<span class="color-box yui-space is-margin-bottom-sm"></span>
<span class="color-box yui-space is-margin-left-md"></span>
<span class="color-box yui-space is-margin-s-xl"></span>
<span class="color-box yui-space is-margin-v-xxl"></span>

<hr class="hr_guide-line">

<div class="h2_guide-title">Space Padding</div>
<p><code>.is-padding</code>,<code>.is-padding-top-{$key}</code>,<code>.is-padding-right-{$key}</code>,<code>.is-padding-bottom-{$key}</code>,<code>.is-padding-left-{$key}</code>,<code>.is-padding-s-{$key}</code>,<code>.is-padding-v-{$key}</code><br><small>{$key} = [xxs,xs,sm,md,lg,xl,xxl]</small></p>

<span class="color-box yui-space is-padding-top-xxs"></span>
<span class="color-box yui-space is-padding-right-xs"></span>
<span class="color-box yui-space is-padding-bottom-sm"></span>
<span class="color-box yui-space is-padding-left-md"></span>
<span class="color-box yui-space is-padding-s-xl"></span>
<span class="color-box yui-space is-padding-v-xxl"></span>