記事内に商品プロモーションを含む場合があります
コーディングをしていると、もはや避けては通れないのがpaddingとmarginで余白をつけることです。
このBootstrapを学んでいる方は、HTMLやCSSの基礎は既に習得されている方がほとんどだと思いますので、paddingやmarginについての説明はここでは割愛しますが、「まだ理解していないな」という方には難しい内容かもしれません。
こちらの記事では、Bootstrapにおける余白（Spacing）について詳しく解説していきます。
Bootstrapにおける余白の記述方法について
Bootstrapの余白の記述方法は、単にpaddingやmarginを記載すれば良いというわけではなく、その方向や、どのくらいの数値を適用させるのかを示す必要があります。
padding-topやmargin-topなどがありますよね。
それを記述するには、次のようにします。
{プロパティ}{方向} – {サイズ}
それぞれについて具体的にみていきましょう。
余白（Spacing）の具体的な書き方
先ほど記述方法について確認しました。
より詳細な書き方はこちらです。
| プロパティ | 方向 | サイズ | |||
| m | マージン | なし | 4方向全て | 0 | 0rem |
| p | パディング | t | top（上辺） | 1 | 0.25rem |
| b | bottom （下辺） | 2 | 0.5rem | ||
| l | left（左辺） | 3 | 1rem | ||
| r | right （右辺） | 4 | 1.5rem | ||
| x | x軸（左右） | 5 | 3rem | ||
| y | y軸 （上下） | ||||
【補足】サイズ感のremに関して
先のテーブルの表組で、サイズにremという単位がありました。
remについてここでふれておきます。
remとはルートemの略称で、htmlタグにおける文字サイズを基準にした単位です。
例えばhtmlタグの文字サイズの指定が16pxであれば、0.25remなら1/4で4pxです。
こちらも一覧で示しておきましょう。
| サイズ | |||
| 0 | 0rem | 16px × 0 | 0px |
| 1 | 0.25rem | 16px × 0.25 | 4px |
| 2 | 0.5rem | 16px × 0.5 | 8px |
| 3 | 1rem | 16px × 1 | 16px |
| 4 | 1.5rem | 16px × 1.5 | 24px |
| 5 | 3rem | 16px × 3 | 48px |
以上のようになります。
ただし、注意点としては、htmlタグの文字サイズが16px以外のものが指定されていた場合、基準となる数値が変わってきてしまうので、その点は注意してください。
例）基準が20pxだと1remは20pxになります
実機確認
では、さらに具体的にどのように表示されるのかをコードを記述しながらみていきます。
（※bodyタグ直下のコードです・containerでくるんでいません）
maginの書き方
marginの記述方法
- <h3 class=“ml-0 text-light bg-primary”>marginなし</h3>
- <h3 class=“ml-1 text-light bg-primary”>margin（0.25rem）</h3>
- <h3 class=“ml-2 text-light bg-primary”>margin（0.5rem）</h3>
- <h3 class=“ml-3 text-light bg-primary”>margin（1rem）</h3>
- <h3 class=“ml-4 text-light bg-primary”>margin（1.5rem）</h3>
- <h3 class=“ml-5 text-light bg-primary”>margin（3rem）</h3>
marginの実装例1行目の「marginなし」を基準に見ていきます。
htmlタグの文字サイズ（font-size）は16pxなので、それぞれ解説と同じmarginの余白感になっています。
- marginなし 0
- margin0.25rem 4px
- margin0.5rem 8px
- margin1rem 16px
- margin1.5rem 24px
- margin3rem 48px
【補足】全方向にmarginをかける場合
m-5
上記のような記述をします。
paddingの書き方
paddingの記述方法
- <h3 class=“pl-0 text-light bg-success”>paddingなし</h3>
- <h3 class=“pl-1 text-light bg-success”>padding（0.25rem）</h3>
- <h3 class=“pl-2 text-light bg-success”>padding（0.5rem）</h3>
- <h3 class=“pl-3 text-light bg-success”>padding（1rem）</h3>
- <h3 class=“pl-4 text-light bg-success”>padding（1.5rem）</h3>
- <h3 class=“pl-5 text-light bg-success”>padding（3rem）</h3>
paddingの実装例marginの時と同じように、次のようになっていることが分かります。
- paddingなし 0
- padding0.25rem 4px
- padding0.5rem 8px
- padding1rem 16px
- padding1.5rem 24px
- padding3rem 48px
【補足】全方向にpaddingをかける場合
p-5
こちらも先ほど同様、上記のような記述となります。
まとめ
Bootstrapの基本要素の余白（Spacing）について見てきました。
記述方法は、以下の通りでした。
{プロパティ}{方向} – {サイズ}
書き方とrem表記の意味を覚えてしまえば、そこまで難しくはないと感じています。
基本要素の中でも特に、余白に関しては使用頻度が高いものになると思いますので、しっかりとこの基本を押さえて、Bootstrapを使いこなしていってください。
※Bootstrap公式サイトのSpacingのドキュメントリンクはこちらです。
