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-[数値]だと左にマージン

上余白	右余白	下余白	左余白	指定される余白サイズ
mt-0	mr-0	mb-0	ml-0	0
mt-1	mr-1	mb-1	ml-1	0.25rem
mt-2	mr-2	mb-2	ml-2	0.5rem
mt-3	mr-3	mb-3	ml-3	1rem
mt-4	mr-4	mb-4	ml-4	1.5rem
mt-5	mr-5	mb-5	ml-5	3rem

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

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

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

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

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

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

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

上パディング	右パディング	下パディング	左パディング	指定される余白サイズ
pt-0	pr-0	pb-0	pl-0	0
pt-1	pr-1	pb-1	pl-1	0.25rem
pt-2	pr-2	pb-2	pl-2	0.5rem
pt-3	pr-3	pb-3	pl-3	1rem
pt-4	pr-4	pb-4	pl-4	1.5rem
pt-5	pr-5	pb-5	pl-5	3rem

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

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

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

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