m-(direction)-(size)
ブロック要素の外部余白を変更する。
m-xs
m-t-xs
m-r-xs
m-b-xs
m-l-xs
m-sm
m-t-sm
m-r-sm
m-b-sm
m-l-sm
m
m-t
m-r
m-b
m-l
m-lg
m-t-lg
m-r-lg
m-b-lg
m-l-lg
m-xl
m-t-xl
m-r-xl
m-b-xl
m-l-xl
m-xxl
m-t-xxl
m-r-xxl
m-b-xxl
m-l-xxl
<div class="m-xs bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-xs</div> <div class="m-t-xs bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-t-xs</div> <div class="m-r-xs bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-r-xs</div> <div class="m-b-xs bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-b-xs</div> <div class="m-l-xs bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-l-xs</div> <div class="m-sm bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-sm</div> <div class="m-t-sm bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-t-sm</div> <div class="m-r-sm bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-r-sm</div> <div class="m-b-sm bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-b-sm</div> <div class="m-l-sm bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-l-sm</div> <div class="m bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m</div> <div class="m-t bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-t</div> <div class="m-r bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-r</div> <div class="m-b bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-b</div> <div class="m-l bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-l</div> <div class="m-lg bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-lg</div> <div class="m-t-lg bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-t-lg</div> <div class="m-r-lg bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-r-lg</div> <div class="m-b-lg bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-b-lg</div> <div class="m-l-lg bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-l-lg</div> <div class="m-xl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-xl</div> <div class="m-t-xl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-t-xl</div> <div class="m-r-xl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-r-xl</div> <div class="m-b-xl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-b-xl</div> <div class="m-l-xl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-l-xl</div> <div class="m-xxl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-xxl</div> <div class="m-t-xxl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-t-xxl</div> <div class="m-r-xxl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-r-xxl</div> <div class="m-b-xxl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-b-xxl</div> <div class="m-l-xxl bg-first bg-fade p-xs" style="border: 1px solid #ccc;">m-l-xxl</div>