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

bootstraphtml&css

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

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

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

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

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

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

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

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

全体指定される余白サイズ
m-00
m-10.25rem
m-20.5rem
m-31rem
m-41.5rem
m-53rem

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

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

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

上余白右余白下余白左余白指定される余白サイズ
mt-0mr-0mb-0ml-00
mt-1mr-1mb-1ml-10.25rem
mt-2mr-2mb-2ml-20.5rem
mt-3mr-3mb-3ml-31rem
mt-4mr-4mb-4ml-41.5rem
mt-5mr-5mb-5ml-53rem

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

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

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

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

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

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

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

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

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

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

全体指定される数値
p-00
p-10.25rem
p-20.5rem
p-31rem
p-41.5rem
p-53rem

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

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

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

上パディング右パディング下パディング左パディング指定される余白サイズ
pt-0pr-0pb-0pl-00
pt-1pr-1pb-1pl-10.25rem
pt-2pr-2pb-2pl-20.5rem
pt-3pr-3pb-3pl-31rem
pt-4pr-4pb-4pl-41.5rem
pt-5pr-5pb-5pl-53rem

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

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

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

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

まとめ

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

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

コメント

タイトルとURLをコピーしました