CSS講座 / ボックスモデル：内容・padding・border・margin

CSS講座

CSSのボックスモデルは、内容領域、その内側の余白であるpadding、枠のborder、外側のmarginで要素の大きさと間隔を考える仕組みです。通常のブロック配置では、隣接する縦方向のmarginが条件によって相殺されることもあります。

四つの領域と背景の範囲

内容領域には文字や画像を置き、paddingは内容と枠の間、borderは要素の境界、marginは枠の外の間隔です。案内カードなら本文、枠内の余白、カードの線、隣のカードとの間隔に対応します。

図の色は領域を区別するためのものです。通常の背景色は内容とpaddingに描かれ、枠の下にも描かれますが、marginには描かれません。色の付いたカード内部を広くするならmarginではなくpaddingを増やします。背景の描画範囲を変える別の指定もありますが、ここでは標準的な挙動で比較します。

指定幅と枠までの幅を計算する

.card {

  width: 200px;

  padding: 20px;

  border: 2px solid #2f6e9b;

  margin: 16px;

  background-color: #eaf4fa;

}

通常のcontent-boxではwidth:200pxは内容の幅です。左右20pxのpaddingと2pxの枠を足すと、枠までの幅は244pxです。さらに左右16pxのmarginを含む横方向の空間は276pxです。ただし縦marginは相殺される場合があるため、すべてを単純加算しません。

同じ例でbox-sizingだけをborder-boxにすると枠までが200px、内容幅は156pxになります。widthとbox-sizingの比較では同じカードを測定します。MDNのボックスモデル入門も参照できます。

一〜四個の値と論理方向を読む

短縮形	上	右	下	左
padding:10px	10px	10px	10px	10px
padding:10px 20px	10px	20px	10px	20px
padding:10px 20px 30px	10px	20px	30px	20px
padding:10px 20px 30px 40px	10px	20px	30px	40px

marginも同じ順です。二値は上下・左右、三値は上・左右・下、四値は上から時計回りに読みます。一方向だけならpadding-topなどの個別プロパティを使います。後から短縮形を再指定すると前の方向別指定にも影響するため順序を確認します。

padding-inlineやmargin-blockは書字方向を基準にします。この左から右の横書きではinlineが左右、blockが上下ですが、縦書きでは物理的な方向が変わります。MDNのmargin-blockで対応を確認できます。

縦marginの相殺を理解する

通常のブロックフローで隣接する縦marginは、一つの間隔にまとめられる場合があります。前の下marginが20px、次の上marginが30pxという正の値なら、合計50pxでなく大きい方の30pxになる例があります。

横marginやpaddingはこの形で相殺されません。FlexboxやGridのアイテムのmarginも通常のブロックと同じようには相殺されません。親子関係や負のmarginには別の条件があるため、ここでは兄弟ブロックの正の縦marginだけを比較します。MDNのmarginの相殺で詳しい条件を確認してください。

実行して各領域を測る

次の全体をUTF-8のbox-model.htmlとして保存します。最初のカードは四領域、点線枠の二行は相殺、最後の枠は三値のpaddingを観察する例です。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Box model and spacing exercise</title>

  <style>

    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }

    .card { width: 200px; padding: 20px; border: 2px solid #2f6e9b;

      margin: 16px; background-color: #eaf4fa; }

    .collapse-demo { max-width: 300px; padding: 8px; border: 1px dashed #777; }

    .row { padding: 8px; background: #e9f7ef; }

    .first { margin-bottom: 20px; }

    .second { margin-top: 30px; }

    .three-values { max-width: 250px; padding: 10px 20px 30px;

      border: 1px solid #b98022; background: #fff4d9; }

  </style>

</head>

<body>

  <h1>The four box areas</h1>

  <div class="card">The content width is 200px; the width including the border is 244px.</div>

  <h2>Vertical margin collapsing</h2>

  <div class="collapse-demo">

    <div class="row first">Bottom margin: 20px</div>

    <div class="row second">Top margin: 30px</div>

  </div>

  <h2>Padding with three values</h2>

  <div class="three-values">Top: 10px; left and right: 20px; bottom: 30px</div>

</body>

</html>

開発者ツールで.cardを選び、StylesまたはComputedのボックス表示で内容200px、左右padding20px、枠2px、margin16pxを確認します。
paddingだけを30pxにすると内容200pxは同じで枠まで264pxです。20pxへ戻してmarginを32pxにすると、カード自体の244pxは同じで外側の間隔が変わります。
点線枠内の間隔は20pxと30pxの相殺で30pxです。前の下marginを40pxへ変え、間隔が40pxになることを確認して戻します。
.three-valuesは上10px・左右20px・下30pxです。最後の30pxを外して二値にすると下も10pxになります。

予想と違う余白はpやh1の初期margin、別のセレクター、相殺が原因かもしれません。どの要素のどの領域かを調べてから一値ずつ変更し、実習後は元へ戻します。

CSS講座