utility-padding

u-padding-(direction)-(size)

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

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

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

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

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

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

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