utility-margin

u-margin-(direction)-(size)

ブロック要素の外部余白を変更する。

u-margin-x-auto
u-margin-xs
u-margin-top-xs
u-margin-right-xs
u-margin-bottom-xs
u-margin-left-xs
u-margin-x-xs
u-margin-y-xs
u-margin-sm
u-margin-top-sm
u-margin-right-sm
u-margin-bottom-sm
u-margin-left-sm
u-margin-x-sm
u-margin-y-sm
u-margin-md
u-margin-top-md
u-margin-right-md
u-margin-bottom-md
u-margin-left-md
u-margin-x-md
u-margin-y-md
u-margin-lg
u-margin-top-lg
u-margin-right-lg
u-margin-bottom-lg
u-margin-left-lg
u-margin-x-lg
u-margin-y-lg
u-margin-xl
u-margin-top-xl
u-margin-right-xl
u-margin-bottom-xl
u-margin-left-xl
u-margin-x-xl
u-margin-y-xl
u-margin-xxl
u-margin-top-xxl
u-margin-right-xxl
u-margin-bottom-xxl
u-margin-left-xxl
u-margin-x-xxl
u-margin-y-xxl
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-x-auto" style="background-color: rgba(255,255,255,.35); width: 50%;">u-margin-x-auto</div></div>

<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-xs" style="background-color: rgba(255,255,255,.35);">u-margin-xs</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-top-xs" style="background-color: rgba(255,255,255,.35);">u-margin-top-xs</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-right-xs" style="background-color: rgba(255,255,255,.35);">u-margin-right-xs</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-bottom-xs" style="background-color: rgba(255,255,255,.35);">u-margin-bottom-xs</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-left-xs" style="background-color: rgba(255,255,255,.35);">u-margin-left-xs</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-x-xs" style="background-color: rgba(255,255,255,.35);">u-margin-x-xs</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-y-xs" style="background-color: rgba(255,255,255,.35);">u-margin-y-xs</div></div>

<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-sm" style="background-color: rgba(255,255,255,.35);">u-margin-sm</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-top-sm" style="background-color: rgba(255,255,255,.35);">u-margin-top-sm</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-right-sm" style="background-color: rgba(255,255,255,.35);">u-margin-right-sm</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-bottom-sm" style="background-color: rgba(255,255,255,.35);">u-margin-bottom-sm</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-left-sm" style="background-color: rgba(255,255,255,.35);">u-margin-left-sm</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-x-sm" style="background-color: rgba(255,255,255,.35);">u-margin-x-sm</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-y-sm" style="background-color: rgba(255,255,255,.35);">u-margin-y-sm</div></div>

<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-m-md" style="background-color: rgba(255,255,255,.35);">u-margin-md</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-top-md" style="background-color: rgba(255,255,255,.35);">u-margin-top-md</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-right-md" style="background-color: rgba(255,255,255,.35);">u-margin-right-md</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-bottom-md" style="background-color: rgba(255,255,255,.35);">u-margin-bottom-md</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-left-md" style="background-color: rgba(255,255,255,.35);">u-margin-left-md</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-x-md" style="background-color: rgba(255,255,255,.35);">u-margin-x-md</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-y-md" style="background-color: rgba(255,255,255,.35);">u-margin-y-md</div></div>

<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-lg" style="background-color: rgba(255,255,255,.35);">u-margin-lg</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-top-lg" style="background-color: rgba(255,255,255,.35);">u-margin-top-lg</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-right-lg" style="background-color: rgba(255,255,255,.35);">u-margin-right-lg</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-bottom-lg" style="background-color: rgba(255,255,255,.35);">u-margin-bottom-lg</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-left-lg" style="background-color: rgba(255,255,255,.35);">u-margin-left-lg</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-x-lg" style="background-color: rgba(255,255,255,.35);">u-margin-x-lg</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-y-lg" style="background-color: rgba(255,255,255,.35);">u-margin-y-lg</div></div>

<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-xl" style="background-color: rgba(255,255,255,.35);">u-margin-xl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-top-xl" style="background-color: rgba(255,255,255,.35);">u-margin-top-xl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-right-xl" style="background-color: rgba(255,255,255,.35);">u-margin-right-xl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-bottom-xl" style="background-color: rgba(255,255,255,.35);">u-margin-bottom-xl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-left-xl" style="background-color: rgba(255,255,255,.35);">u-margin-left-xl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-x-xl" style="background-color: rgba(255,255,255,.35);">u-margin-x-xl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-y-xl" style="background-color: rgba(255,255,255,.35);">u-margin-y-xl</div></div>

<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-xxl" style="background-color: rgba(255,255,255,.35);">u-margin-xxl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-top-xxl" style="background-color: rgba(255,255,255,.35);">u-margin-top-xxl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-right-xxl" style="background-color: rgba(255,255,255,.35);">u-margin-right-xxl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-bottom-xxl" style="background-color: rgba(255,255,255,.35);">u-margin-bottom-xxl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-left-xxl" style="background-color: rgba(255,255,255,.35);">u-margin-left-xxl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-x-xxl" style="background-color: rgba(255,255,255,.35);">u-margin-x-xxl</div></div>
<div style="margin-bottom: 1rem; padding: 1px; background-color: #7de;"><div class="u-margin-y-xxl" style="background-color: rgba(255,255,255,.35);">u-margin-y-xxl</div></div>