Bootstrapの余白を解説。マージンとパディングの違いとは？

サイトデザインを行うと必ず目にする「マージン」と「パディング」。どちらも余白を指定するときのプロパティですが、「とりあえず書いたら整った！」と理由なく使っている方も多いのではないでしょうか。今回は、マージンとパディングの違いを、Bootstrapを用いながら解説していきたいと思います。ぜひ、参考にしてみてください。

システム
エンジニア

確かに、どっちがどっちだっけ？ってよく分からなくなりますね。

プロジェクト
リーダー

大丈夫です。覚えやすい方法をお伝えするのでご安心ください。

マージンとパディングの違い

マージンは、ボックスの外側の余白です。ボックスをどこに設置するか、という位置を調整するために使用されるプロパティです。一方パディングは、ボックスの内側の余白です。パディングには「詰める」という意味があり、ボックス内のテキストや画像の位置を調整するために使用します。以下のようなイメージです。（青：マージン/グレー：パディング）

マージン・パディングどちらもデフォルトは「0」に設定されています。
それぞれ何も設定していない場合は以下のようになります。

■マージン：未設定/パディング：設定

■マージン：設定/パディング：未設定

何となく違いはお分かりいただけましたでしょうか。「マージン＝ボックスの配置を調整、パディング＝要素の余白を調整」と覚えておいてください。
次項では、Bootstrapを使用してマージンとパディングを調整していきます。

マージンとパディングを実際に設定してみよう

前提
ここではBootstrapを使用します。まだ導入していない方は、下記リンクよりダウンロードしてください。（CDNでも可）
https://getbootstrap.jp/docs/4.3/getting-started/introduction/

さっそく設定していくのですが、Bootstrapでは少し記述方法が異なります。例えばマージンは「m」・パディングは「p」という風にです。
また、余白を入れる場所は以下のように記述します。

• 上（top）→ t
• 下（bottom）→ b
• 右（right）→ r
• 左（left）→ l
• 上下 → y
• 左右 → x

また、ハイフンの後ろにどのくらいの余白を取るのかを設定していきます。
Bootstrapでは、以下の0～5までの間で設定することができます。
※1rem＝16px（デフォルト）

これらを組み合わせ、以下のように記述します。

• 上に0.25remのマージン → mt-1
• 下に1remのパディング → pb-3
• 左右に3remのマージン → mx-5

アルファベットの頭文字を取れば良いだけなのでとても簡単ですね。
実際のソースコードはこのようになります。

ソースコード

結果

このように、それぞれ指定した余白ができました。

システム
エンジニア

マージンとパディングの違い、以前よりも分かるようになった気がします。

プロジェクト
リーダー

ぜひ使い分けられるようになってくださいね。

マージンは外、パディングは内

使い分けに迷ってしまうマージンとパディングですが、今回で大分違いをご理解いただけたのではないかと思います。「マージンは外側の余白、パディングは内側の余白（詰め物を入れるみたいなイメージ）」と覚えてしまえば、もう迷うことはありません。この記事を参考に、ぜひ余白マスターになってくださいね。