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) | |
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-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