bootstrap4でmargin・paddingをサッと指定する方法

bootstrap4でmargin・paddingをサッと指定する方法

bootstrap4でマージン(margin)・パディング(padding)を調整するクラスについて書いています。

公式のspacingの内容になります。

マージン(margin)をつけたい

下記で記載している内容をcodepenで試してみました。

See the Pen
bootstrap4 margin by yasuaki (@include777)
on CodePen.

上下左右にマージンをつける

m-[数値]クラスを使用すると、マージンをつけることができます。
margin: [数値]rem;がクラスを指定した要素に設定されます。

上下左右のいずれかにマージンをつける

mの後にt(top),r(right),b(bottom),l(left)と続けることで下記の意味になります。

・mt-[数値]だと上にマージン
・mr-[数値]だと右にマージン
・mb-[数値]だと下にマージン
・ml-[数値]だと左にマージン

上下にマージンをつける(my-*)

my-[数値]を指定すると、上下にマージンが設定されます。
設定されるマージンは上記表の余白サイズと同じです。

左右にマージンをつける(mx-*)

mx-[数値]を指定すると、左右にマージンが設定されます。
設定されるマージンは上記表の余白サイズと同じです。

上下左右の自動マージン(m-auto)

m-autoというクラスもありますが、これがmargin:autoになります。

パディング(padding)をつけたい

マージンと同じようにpを使うことでパディングを設定できます。

上下左右にパディングをつける

p-[数値]クラスを使用すると、パディングをつけることができます。
padding: [数値]rem;がクラスを指定した要素に設定されます。

上下左右のいずれかにパディングをつける

pの後にt(top),r(right),b(bottom),l(left)と続けることで下記の意味になります。

・pt-[数値]だと上にパディング
・pr-[数値]だと右にパディング
・pb-[数値]だと下にパディング
・pl-[数値]だと左にパディング

上下にマージンをつける(py-*)

py-[数値]を指定すると、上下にパディングが設定されます。
設定されるパディングは上記表の余白サイズと同じです。

左右にマージンをつける(px-*)

px-[数値]を指定すると、左右にパディングが設定されます。
設定されるパディングは上記表の余白サイズと同じです。

まとめ

マージンはm(t,r,b,l)-[数値]で、パディングはp(t,r,b,l)-[数値]でつけることができました。
指定される数値は0-3remでした。

既にクラスを独自で作っている場合は、そこで付けることになると思いますが、
テストページを作るときや、個別にちょっと指定したい時など、パパッとマージンやパディングを指定して調整するときは便利なのでオススメです。