utility-margin

echo-margin-(direction)-0

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

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

echo-margin-(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-margin-xs
echo-margin-top-xs
echo-margin-right-xs
echo-margin-bottom-xs
echo-margin-left-xs
echo-margin-x-xs
echo-margin-y-xs
echo-margin-sm
echo-margin-top-sm
echo-margin-right-sm
echo-margin-bottom-sm
echo-margin-left-sm
echo-margin-x-sm
echo-margin-y-sm
echo-margin-md
echo-margin-top-md
echo-margin-right-md
echo-margin-bottom-md
echo-margin-left-md
echo-margin-x-md
echo-margin-y-md
echo-margin-lg
echo-margin-top-lg
echo-margin-right-lg
echo-margin-bottom-lg
echo-margin-left-lg
echo-margin-x-lg
echo-margin-y-lg
echo-margin-xl
echo-margin-top-xl
echo-margin-right-xl
echo-margin-bottom-xl
echo-margin-left-xl
echo-margin-x-xl
echo-margin-y-xl
echo-margin-xxl
echo-margin-top-xxl
echo-margin-right-xxl
echo-margin-bottom-xxl
echo-margin-left-xxl
echo-margin-x-xxl
echo-margin-y-xxl