ブートストラップの隙間（余白）の設定まとめ

ブートストラップでは、隙間（余白）の設定に関するクラスが複数あります。主にマージンとパディングを調整するためのクラスが提供されています。以下にまとめます。

---

1. マージン (Margin)

外側の余白を設定します。
クラス名のプレフィックスは m です。

基本構文

m{方向}-{サイズ}

• {方向}: t (top), b (bottom), s (start), e (end), x (左右), y (上下), 空白 (全方向)
• {サイズ}: 0, 1, 2, 3, 4, 5, auto

サイズ値	間隔 (px)
0	0px
1	4px
2	8px
3	16px
4	24px
5	48px
auto	自動調整

例

• m-0 : 全方向のマージンを0
• mt-3: 上側のマージンを16px
• mb-4: 下側のマージンを24px
• mx-2: 左右のマージンを8px
• my-1: 上下のマージンを4px
• ms-auto: 左側のマージンを自動調整 (右寄せに役立つ)

---

2. パディング (Padding)

内側の余白を設定します。
クラス名のプレフィックスは p です。

基本構文

p{方向}-{サイズ}

• {方向}: t (top), b (bottom), s (start), e (end), x (左右), y (上下), 空白 (全方向)
• {サイズ}: 0, 1, 2, 3, 4, 5

例

• p-0 : 全方向のパディングを0
• pt-3: 上側のパディングを16px
• pb-4: 下側のパディングを24px
• px-2: 左右のパディングを8px
• py-1: 上下のパディングを4px

---

3. ギャップ (Gap)

FlexboxやGridコンテナの子要素間の隙間を設定する場合に使います。
クラス名のプレフィックスは gap です。

基本構文

gap-{サイズ}

• {サイズ}: 0, 1, 2, 3, 4, 5

例

• gap-0 : 要素間の隙間を0
• gap-3 : 要素間の隙間を16px
• gap-4 : 要素間の隙間を24px

---

4. レスポンシブ対応

隙間の設定はレスポンシブに対応しています。ブレークポイントを指定することで、画面サイズごとに余白を調整できます。

基本構文

{ブレークポイント}-{m or p}{方向}-{サイズ}

ブレークポイント

キーワード	画面幅
sm	576px以上
md	768px以上
lg	992px以上
xl	1200px以上
xxl	1400px以上

例

• mb-md-4: 中サイズ (768px以上) の画面で下側マージンを24px
• px-lg-3: 大サイズ (992px以上) の画面で左右パディングを16px

---

5. ユーティリティのリセット

不要な隙間を無効にする場合、以下のクラスを使います。

• m-0: マージンをすべて0にリセット
• p-0: パディングをすべて0にリセット

---

これらのクラスを組み合わせることで、ブートストラップのレイアウトに柔軟な隙間設定が可能になります。