utility-padding

echo-padding-(direction)-0

ブロック要素の内部余白を強制的に消す。

echo-padding-0
echo-padding-top-0
echo-padding-left-0
echo-padding-bottom-0
echo-padding-right-0
echo-padding-x-0
echo-padding-y-0

echo-padding-(direction)-(size)

ブロック要素の内部余白を変更する。
余白は (breakpoint) が xs - xxl の間、 画面サイズに対する相対で変動する。

デフォルトの、サイズの名称に対する余白のピクセル数は以下の通り。最大値が最小値の150%となる。
Internet Explorerは変動に対応していないため、常に最大値となる。

Sassを使用できる場合、ピクセル数は _scss/config_advance.scss の配列 $spacing-min, $spacing-max で変更できる。

(size)(breakpoint)
xs (min)xxl (max)
xs0.25rem (4px)0.375rem (6px)
sm0.5rem (8px)0.75rem (12px)
md1rem (16px)1.5rem (24px)
lg2rem (32px)3rem (48px)
xl3rem (48px)4.5rem (72px)
xxl4rem (64px)6rem (96px)
echo-padding-xs
echo-padding-top-xs
echo-padding-right-xs
echo-padding-bottom-xs
echo-padding-left-xs
echo-padding-x-xs
echo-padding-y-xs
echo-padding-sm
echo-padding-top-sm
echo-padding-right-sm
echo-padding-bottom-sm
echo-padding-left-sm
echo-padding-x-sm
echo-padding-y-sm
echo-padding-md
echo-padding-top-md
echo-padding-right-md
echo-padding-bottom-md
echo-padding-left-md
echo-padding-x-md
echo-padding-y-md
echo-padding-lg
echo-padding-top-lg
echo-padding-right-lg
echo-padding-bottom-lg
echo-padding-left-lg
echo-padding-x-lg
echo-padding-y-lg
echo-padding-xl
echo-padding-top-xl
echo-padding-right-xl
echo-padding-bottom-xl
echo-padding-left-xl
echo-padding-x-xl
echo-padding-y-xl
echo-padding-xxl
echo-padding-top-xxl
echo-padding-right-xxl
echo-padding-bottom-xxl
echo-padding-left-xxl
echo-padding-x-xxl
echo-padding-y-xxl