とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. スペーシング

スペーシング

.m{t|r|b|l|x|y}-{n}, .p{t|r|b|l|x|y}-{n}, .m{t|r|b|l|x|y}-{breakpoint}-{n}, .p{t|r|b|l|x|y}-{breakpoint}-{n} は、マージンやパディングを指定します。一文字目はマージンかパディングかを指定します。

• m : margin
• p : padding

2文字目は方向を示します。

• t : top
• r : right
• b : bottom
• l : left
• x : top および bottom
• y : right および left
• (なし) : 四方向

{breakpoint} には下記を指定します。(詳細)

• (なし) : xs サイズ以上
• sm : sm 以上
• md : md 以上
• lg : lg 以上
• xl : xl 以上

{n} には 0～5 の値、または auto を指定できます。n0～n5 はマイナスの値を示します。

<div class="my-box mb-3">...</div>
<div class="my-box ml-5">...</div>