ボックスモデルをわかりやすく解説！margin、padding、borderの使い方まとめ

CSS（Cascading Style Sheets）は、ウェブページのスタイリングに不可欠な技術ですが、その中でも特に重要なのが「ボックスモデル」です。この記事では、ボックスモデルの各要素であるコンテンツ、パディング、ボーダー、マージンの役割と使い方について詳しく説明します📏📐

ボックスモデルとは？

まずはMDNでボックスモデルについて調べてみます。

CSS のボックスは、テキスト、画像、その他の HTML 要素が表示されるコンテンツ領域で構成されています。この領域は、パディング、境界、マージンによって、1 つ以上の辺で囲まれることがあります。ボックスモデルは、これらの要素がどのように連携して CSS で表示されるボックスを作成するかを説明します。

CSS ボックスモデル – CSS: カスケーディングスタイルシート | MDN

読んだとおりなのですが、荒っぽく言いかえれば、ボックスの幅はどうやって計算するか？ということです。なんの装飾もないまっさらなボックスであればシンプルに『指定した幅 ＝ ボックスの幅』になるわけですが、CSSには余白や境界線などを設定することができます。それらを含めてどう計算するか定義したものをボックスモデルと呼んでいるのですね。

ボックスモデルの構成要素

ボックスモデルは以下の4つの主要な部分で構成されています：

1. コンテンツ（Content）：テキストや画像などの実際の内容が表示される領域。
2. パディング（Padding）：コンテンツとボーダーの間のスペース。
3. ボーダー（Border）：パディングとマージンの間の境界線。
4. マージン（Margin）：ボーダーと他の要素の間のスペース。

画像で示すとこんな感じです。

各構成要素を一つづつ見ていきましょう。

コンテンツ（Content）

コンテンツは、ボックスモデルの中心部分です。これはテキスト、画像、その他のマルチメディアコンテンツが表示される領域です。ただPadding、Border、Marginを理解していれば、これはそんなに意識しなくても大丈夫です。

See the Pen ボックスモデル1 by yusuke1110 (@yusuke1110) on CodePen.

何も指定してないので、ただ文字が表示されているだけの状態です。（わかりやすいように背景色を設定しています。）

パディング（Padding）

パディングは、コンテンツとボーダーの間の内側のスペースです。例えばボーダーのみを設定すると、コンテンツとボーダーが接してしまいますが、パディングを使うことで、コンテンツがボーダーから離れて表示され、見やすくなります。

See the Pen ボックスモデル2 by yusuke1110 (@yusuke1110) on CodePen.

最初の画像で示した通り、パディングは内側の余白なので、文字要素の上下左右に20pxの空白ができました。

ボーダー（Border）

ボーダーは、パディングとマージンの間の境界線です。ボーダーの色、スタイル、太さを指定できます。

See the Pen ボックスモデル3 by yusuke1110 (@yusuke1110) on CodePen.

この例では、要素に10pxのボーダーが追加されています。前述のとおり、この例ではパディングが設定されていないため、コンテンツとボーダーが接しています。

マージン（Margin）

マージンは、ボーダーと他の要素の間の外側のスペースです。マージンを使うことで、要素同士の間隔を調整できます。

See the Pen ボックスモデル4 by yusuke1110 (@yusuke1110) on CodePen.

背景色が無いので少し分かりづらいですが、文字要素の上下左右に40pxの空白ができました。マージンは外側の余白なので、背景色を指定した部分は広がっていません。

ボックスの幅の計算について

ここまでは単純に「ボックスモデルには4つの構成要素でできているんだね」で終わるお話なのですが、ちょっとしたつまづきポイントがあります。

説明するために、まずは今まで見てきた要素を全て設定してみます。

See the Pen ボックスモデル5 by yusuke1110 (@yusuke1110) on CodePen.

この例では、20pxのパディング、10pxのボーダー、40pxのマージンが適用されたボックスが表示されています。コンテンツ部分は幅が設定されていないので、横幅いっぱいで表示されています。

これに対して、幅の設定（width: 150px）を追加してみます。

See the Pen ボックスモデル6 by yusuke1110 (@yusuke1110) on CodePen.

幅を150pxに設定したので、見えているボックス（緑のボーダーまで）が150pxになっていると思いきや実はそうではありません。あくまでも設定はコンテンツ部分の幅であって、ボックスの幅はパディングとボーダーを足したものになります。

つまり「コンテンツ ＋ パディング左右 ＋ ボーダー左右」がボックスの幅ということになります。

ボックスの幅 ＝ 150px ＋（20px ✕ 2）＋（10px ✕ 2） ＝ 210px

ただこれだと直感的ではないですよね。できれば設定した幅そのままで見えていて欲しい。そんな願いに応えてくれるのが「box-sizing: border-box」です。

See the Pen ボックスモデル7 by yusuke1110 (@yusuke1110) on CodePen.

こうすると設定した幅が「コンテンツ ＋ パディング左右 ＋ ボーダー左右」になってくれます。

ボックスの幅 ＝ x ＋（20px ✕ 2）＋（10px ✕ 2） ＝ 150px
※コンテンツ幅は自動で計算される。

box-sizingのプロパティ「border-box」は「ボーダーまでをボックスのサイズとする」という風に読み替えても良さそうです。デフォルト値は「content-box」なので「コンテンツまでをボックスのサイズとする」ですね。

状況に応じて、適切な方を使ってください。ただしサイトの各所でバラバラの設定をしてしまうと、わけがわからなくなってくるので、サイト全体で統一しましょう。

まとめ

ボックスモデルはCSSの基本であり、コーディングの基礎中の基礎です。ただ、コンテンツ、パディング、ボーダー、マージンの4つの要素さえ頭に入れておけば良いので、この機会にしっかり抑えておきましょう。「なんか計算が合わないな？」と思った時は「box-sizing」のプロパティを疑ってみてください。

ボックスモデルの概念をしっかりと把握し、実際のデザインに活かしていきましょう👍