Bootstrap 余白の設定について

クラス名pl-3は何?

パディングレフトでサイズが1remということ

パディング/マージン+場所+スラッシュ+サイズということ


p: パディング

m: マージン


場所

t: トップ

b: ボトム

l: レフト 左

r: ライト 右

x: 左右同時に 左と右

y: 縦方向同時に 上と下


サイズは

0: 0 なし

1: 0.25rem

2: 0.5rem

3: 1.0rem

4: 1.5rem

5: 3.0rem

ちなみに0.5remとは50%のこと

親要素に対しての%

div{
    font-size:16px;
}
div > p{
    font-size:0.5em;
}

この場合pは親のdivタグが16pxなので8pxとなる。


マージンだけauto指定がある。

auto:


実例 これはクラス名

pl-3: パディングレフトでサイズが3

my-0: 上下マージンが0

mx-auto: 左右のマージンが自動 センター揃えになります。


w-25: widthが25%幅

w-50: widthが50%幅

w-75: widthが75%幅

w-100: widthが100%幅


h-25: heightが25%幅

h-50: heightが50%幅

h-75: heightが75%幅

h-100: heightが100%幅