CSSのボックスモデル(content,padding,border,margin)とは

ボックスモデルの概念

リンクをコピーしました

CSSには、「ボックス」という概念があります。
ボックスとは、要素の周辺を取り囲む四角形の領域のことです。HTML文書内に配置した全ての要素は、ボックスを生成します。

各ボックスには、次のように4つの領域（ボックスモデル）があります。

各領域の大きさは、対応するプロパティが用意されています。

ボックスモデルを理解すれば、見出しと段落の間に意図した余白を入れることができたり、要素に境界線を付けることができます。

content（コンテンツ）

リンクをコピーしました

content（コンテンツ）は、テキストや画像といった要素の内容が表示される領域です。
1番内側の領域です。

次のp要素の場合、要素の内容である「CSSとは〜」のテキストがcontentに当てはまります。

1
<p>CSSとは「Cascading Style Sheets」の略です。</p>

またcontentの領域の幅や高さは、widthプロパティとheightプロパティで指定することができます。

widthプロパティ

リンクをコピーしました

widthプロパティは、content領域の幅を指定することができます。
次の例で確認してみましょう。

1
<p>CSSとは「Cascading Style Sheets」の略です。</p>

次のようにp要素にboxクラスを追加して、CSSで「幅」を指定します。

1
<p class="box">CSSとは「Cascading Style Sheets」の略です。</p>

1
2
3
.box {
  width: 100px;
}

上記のCSSではwidthプロパティで幅を100pxに指定しているので、Webブラウザの表示結果は、以下の通りです。

content領域の幅を100pxに指定したことで、テキストを表示する幅も狭まります。

幅を指定しない場合

リンクをコピーしました

幅を指定しない場合は、自動的に親要素と同等の幅がとられます。
次の例で確認してみましょう。

p要素の親要素は、div要素です。

1
2
3
<div class='container'>
  <p>CSSとは「Cascading Style Sheets」の略です。</p>
</div>

div要素にあるcontainerクラスに対して、以下のように幅を指定します。
p要素の内容に対しては、特に幅を指定してません。

1
2
3
.container {
  width: 100px;
}

上記のWebブラウザ表示結果は、以下の通りです。

p要素に幅を指定していない場合は、親要素であるdiv要素と同等の幅がとられるので、テキストは100pxの幅に狭まります。

heightプロパティ

リンクをコピーしました

heightプロパティは、content領域の高さを指定することができます。
次の例で確認してみましょう。

※ わかりやすいように画像のcontent領域には、    の色を付けています。

1
<p>CSSとは「Cascading Style Sheets」の略です。</p>

次のようにp要素にboxクラスを追加して、CSSで「高さ」を指定します。

1
<p class="box">CSSとは「Cascading Style Sheets」の略です。</p>

1
2
3
.box {
  height: 100px;
}

上記のCSSではheightプロパティで高さを100pxに指定しているので、Webブラウザの表示結果は、以下の通りです。

content領域の高さを100pxに指定したことで、テキストを表示する高さもその分高くなります。

高さを指定しない場合

リンクをコピーしました

高さを指定しない場合は、自動的にcontent領域の高さとなります。
次の例で確認してみましょう。

1
2
3
<div class='container'>
  <p>CSSとは「Cascading Style Sheets」の略です。</p>
</div>

div要素にあるcontainerクラスに対して、以下のように高さを指定します。
p要素の内容に対しては、特に高さを指定してません。

1
2
3
.container {
  height: 100px;
}

div要素の内容の高さを確認すると、上記のCSSで指定した通り100pxとなります。

しかし、div要素の子要素であるpには高さを指定していません。

高さを指定していない場合はwidthプロパティとは違って、親要素と同等の高さではなく、p要素のcontent領域の高さになるので、以下の表示結果となります。

content領域の高さは「要素の内容の高さ」になるので、p要素の場合は「CSSとは〜」のテキストの高さになります。

padding（パディング）

リンクをコピーしました

padding（パディング）は、contentとborderの間にある余白の領域です。

paddingの領域は、paddingプロパティで指定することができます。
paddingプロパティは、要素の全4辺のpadding領域の余白を1度で設定します。

次の例で確認してみましょう。

1
<p class="box">CSSとは「Cascading Style Sheets」の略です。</p>

1
2
3
4
.box {
  /* 上 | 右 | 下 | 左 */
  padding: 10px 5px 10px 5px;
}

上記のCSSのようにpaddingプロパティの値を指定すると、次のように要素の全4辺の余白を設定することができます。

要素の上下と左右の余白が同じサイズの場合、次のように記述できます。

1
2
3
4
.box {
  /* 上下 | 右左 */
  padding: 10px 5px;
}

さらに要素の全4辺の余白が同じサイズの場合は、次のように記述できます。

1
2
3
4
.box {
  /* 4辺全てに適用される */
  padding: 10px;
}

backgroundプロパティを指定する場合

リンクをコピーしました

backgroundプロパティは、色や画像などの背景に関する全てのスタイルを一括で指定するプロパティです。

backgroundプロパティは、content領域とpadding領域に背景が表示されます。

p要素に背景色を付けて確認してみましょう。

次の例では、p要素に対してpaddingプロパティで余白を特に指定していません。そのため、緑の背景色はcontent領域だけに付きます。

1
<p class='box'>CSSとは「Cascading Style Sheets」の略です。</p>

1
2
3
.box{
  background: green;
}

See the Pen padding1 by miyajima yuya (@pikawaka) on CodePen.

続いて、p要素の4辺に80pxの余白を追加してみます。

1
2
3
4
.box{
  background: green;
  padding: 80px;
}

p要素の4辺にpaddingプロパティで余白を追加したことで、次のように背景色はcontent領域だけではなく、padding領域にも付きます。

See the Pen padding2 by miyajima yuya (@pikawaka) on CodePen.

border（ボーダー）

リンクをコピーしました

border（ボーダー）は、padding領域の外側にある領域で、余白ではなく枠線です。

次のようにborder領域は、要素の境界線になります。

borderの領域は、borderプロパティで指定することができます。
borderプロパティは、枠線の幅や色などを4辺全てに一括で指定するプロパティです。

次の例では、p要素の境界にborder: solid;で実線を指定します。

1
<p class='box'>CSSとは「Cascading Style Sheets」の略です。</p>

1
2
3
4
5
.box {
  /* 種類 */
  border: solid;
  padding: 50px;
}

See the Pen border1 by miyajima yuya (@pikawaka) on CodePen.

上のCSSでborder: solid;をborder: dotted;に変更してみましょう。
要素の境界線にどんな変化がみられるでしょうか。

borderプロパティは枠線の種類だけではなく、次のように幅や色も指定できます。

1
2
3
4
5
.box {
  /* 幅 | 種類 | 色 */
  border: 3px solid red;
  padding: 50px;
}

See the Pen border2 by miyajima yuya (@pikawaka) on CodePen.

margin（マージン）

リンクをコピーしました

margin（マージン）は最も外側にある領域です。
margin領域は背景の指定ができず、透明の領域として扱われます。

padding領域は要素の内側の余白部分でしたが、margin領域は要素の外側の余白部分です。

margin領域は、marginプロパティで指定することができます。

marginプロパティは、margin領域を要素の4辺全てに一括で指定するプロパティです。
次のように1~4つまでの値を指定することができます。

1
2
3
4
5
6
7
8
9
10
11
 /* 上 | 右 | 下 | 左 */
margin: 10px 5px 10px 5px;

/* 上下 | 左右 */
margin: 10px 5px; /* 上記の場合は、このように2つの値でまとめて書ける*/

/* 上 | 左右 | 下 */
margin: 10px 8px 5px;

/* 4辺全てに適用 */
margin: 10px;

要素は、余白の分だけ他の要素から離れて配置されます。

要素にmargin: 10pxを指定した場合は、次の画像のように10pxだけ他の要素から離れて配置されます。

それでは、実際にサンプルコードで確認してみます。

次の例では、2つのdiv要素が配置されています。要素にはbox1クラス、またはbox2クラスが付与されており、CSSでスタイルが指定されます。

See the Pen margin1 by miyajima yuya (@pikawaka) on CodePen.

上記ではmarginプロパティで余白を指定していないので、要素の外側の余白がなく、最初の要素の後にすぐ次の要素が詰められて表示されます。

最初の要素にmarginを追加してみます。
次のようにCSSの.box1にmargin: 30px;を追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box1 {
  background: palegreen;
  border: 3px solid;
  height: 100px;
  margin: 30px; /* 要素の4辺全てに30pxが適用される */
  width: 100px;
}

.box2 {
  background: skyblue;
  border: 3px solid;
  height: 100px;
  width: 300px;
}

上記のようにmarginを追加すると、次のように要素が配置されます。

See the Pen margin2 by miyajima yuya (@pikawaka) on CodePen.

CSSでbox1クラスにmargin:30pxを追加したことで、box1クラスを持つ最初のdiv要素の外側に30pxの余白がつくられます。

要素は余白のぶんだけ他の要素から離れるので、次のように30px離れて配置されます。

このようにmarginプロパティで要素の外側の余白を指定すると、余白のぶんだけ他の要素から離れて配置されます。

marginの相殺

リンクをコピーしました

marginを指定する際に注意したいのが、「marginの相殺」と呼ばれる挙動です。

marginの相殺は、marginを指定した2つの要素が垂直に並び、上下のmarginが衝突するときに起こります。

上下のmarginの値が同じ場合に衝突すると、次の画像のように「その間隔は合算されず、結合されて同じ値」となります。

衝突する上下のmarginが異なる値の場合は、次の画像のように「いずれか大きい方の単一のmarginに結合」されます。

marginの相殺が起こるパターンはいくつかありますが、その中でも特にコーディングする上で遭遇するパターンは、以下の2つです。

1. 隣接した要素の上下のmarginは相殺される
2. 入れ子になった要素の上下のmarginは相殺される

これまでに学んだ「margin相殺の基本的な考え」について、次のポイントで整理してから実際にサンプルコードで確かめてみましょう。

1.隣接した要素の上下のmarginは相殺される

リンクをコピーしました

隣接した要素の上下のmarginは相殺されます。

例えば、次のようにmarginが30pxの要素同士が隣り合った場合、衝突する上下のmarginは60pxではなく30pxです。

1
2
<div class="box"></div>
<div class="box"></div>

1
2
3
4
5
6
7
.box {
  background: palegreen;
  border: 3px solid;
  height: 100px;
  margin: 30px;
  width: 100px;
}

上記の表示結果は、以下の通りです。

See the Pen marginの相殺 by miyajima yuya (@pikawaka) on CodePen.

少しわかりづらいので、ディベロッパーツールという開発者向けのツールで調査すると、次のように最初の要素と次の要素の間隔が30pxとなります。

隣接した要素の上下のmarginは相殺されることがわかります。

続いて、次のようにmarginの値が異なる場合、大きい方のmarginが要素の間隔になります。
そのため、衝突する上下のmarginは40pxです。

1
2
<div class='box1'></div>
<div class='box2'></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box1 {
  background: palegreen;
  border: 3px solid;
  height: 100px;
  margin: 10px;
  width: 100px;
}

.box2 {
  background: skyblue;
  border: 3px solid;
  height: 100px;
  margin: 40px; /* こちらのmarginになる */
  width: 100px;
}

上記の表示結果は、以下の通りです。

See the Pen margin相殺2 by miyajima yuya (@pikawaka) on CodePen.

デベロッパーツールでbox2クラスを持つdiv要素を調査すると、次のように最初の要素と次の要素の間隔が40pxとなります。

2.入れ子になった要素の上下のmarginは相殺される

リンクをコピーしました

入れ子になった要素の上下のmarginは相殺されます。

要素の中に別の要素を入れることを「入れ子」と呼びます。次の例では、div要素内にp要素が入り、入れ子構造になっています。

1
2
3
<div class='parent'>
  <p class='child'>sample text</p>
</div>

上記のp要素に対して、要素の上側のmargin領域を設定するmargin-topプロパティで50pxをCSSで指定します。

1
2
3
4
5
6
7
8
9
10
.parent {
  background: blue;
  height: 100px;
  width: 200px;
}

.child {
  color: white;
  margin-top: 50px;
}

.parentではmargin-topを指定していないので0と考えられます。親要素と子要素のmargin-topは相殺され、大きい方（50px）のmargin-topが要素の間隔になります。

そして、次のように「p要素の上側の余白は50pxになる」と期待するかもしれません。

しかし、実際には子要素のmargin-topは、親要素の外側に突き抜けます。

「子要素が親要素から50px離れて配置される」のではなく、次のように「親要素の上側のmargin領域が50pxで配置される」という挙動になります。

See the Pen margin相殺3 by miyajima yuya (@pikawaka) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
.parent {
  background: blue;
  border: solid;
  height: 100px;
  width: 200px;
}

.child {
  color: white;
  margin-top: 50px;
}

See the Pen margin相殺5 by miyajima yuya (@pikawaka) on CodePen.

1
2
3
4
5
6
7
8
9
10
.parent {
  background: blue;
  height: 100px;
  padding-top: 50px;
  width: 200px;
}

.child {
  color: white;
}

See the Pen margin相殺6 by miyajima yuya (@pikawaka) on CodePen.

marginプロパティは、親要素と子要素の距離を広げるためではなく、並列の関係である「兄弟要素」の距離を広げることを目的とします。

そのため、親子関係にある要素の距離を指定するときは、親要素にpaddingプロパティを使いましょう。

この章のまとめ

リンクをコピーしました