CSS ボックスモデルについて

CSSのボックスモデルについてです。

目次

ボックスモデル

すべての要素は、ボックスと呼ばれる領域を持っています。
以下は、ボックスモデルの図です。

1.コンテンツエリア

テキストの文字や画像等が表示される部分です。

2.パディング padding

コンテンツエリアとボーダーの間の部分です。
余白部分です。
背景色や背景画像はこの部分にも表示されます。

3.ボーダー border

赤い線の部分です。要素の周りの枠です。
背景色や背景画像はこの部分にも表示されます。

4.マージン margin

ボーダーの外側にある余白です。
隣の要素と引き離すために使用します。
背景色や背景画像はこの部分には表示されません。

5.ボックス

コンテンツエリア、パディング、ボーダー、マージンから構成されています。

幅と高さ box-sizing プロパティがcontent-boxのとき

widthとheightの値は、コンテンツエリアの幅と高さになります。
※box-sizeingプロパティのデフォルトはcontent-boxです。

幅と高さ box-sizing プロパティがborder-box のとき

widthとheightの値は、コンテンツエリアとパディングとボーダーまで含んだ幅と高さになります。

背景色と背景の画像

背景色の上に背景画像が表示されます。背景画像が透明だと下にある背景色が見えます。

以下はMDNのボックスモデルのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/box_model

 

Chromeのボックスモデル

以下はGoogle Chromeのデベロッパーツールで表示されるボックスモデルの図です。
青がコンテンツ、緑がpadding、黄色がborder、オレンジがmarginです。

関連の記事

CSSを記述する場所のサンプル
CSSを適用する優先順序のサンプル
CSS スタイルの継承のサンプル(inherit)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS ボーダーの表示方法を指定するサンプル(border)
CSS 要素の枠外の余白を指定するサンプル(margin)

△上に戻る