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) | |
xs | 0.25rem (4px) | 0.375rem (6px) |
sm | 0.5rem (8px) | 0.75rem (12px) |
md | 1rem (16px) | 1.5rem (24px) |
lg | 2rem (32px) | 3rem (48px) |
xl | 3rem (48px) | 4.5rem (72px) |
xxl | 4rem (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