CSS ボックスモデルの構造

CSSのボックスモデルの構造です。

目次

構造 ボックスモデル
  Chromeでボックスモデルを確認する

ボックスモデル

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

以下は、ボックスモデルの図です。

1.コンテンツエリア

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

2.パディング padding

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

CSS padding 要素の内側の余白を指定する

3.ボーダー border

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

CSS border ボーダーの表示方法を指定する

4.マージン margin

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

CSS margin 要素の外側の余白を指定する

幅と高さ(widthとheight)

widthとheightの値は、コンテンツエリアの幅と高さになります。
※box-sizingプロパティの影響を受けます。box-sizingプロパティは、paddingとborderの表示方法を指定します。
CSS box-sizing paddingとborderの表示方法を指定

背景色と背景の画像がある場合

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

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

Chromeでボックスモデルを確認する

Google Chromeのデベロッパーツールでボックスモデルを確認できます。

Google Chromeを立ち上げてF12キーを押し→「Elements」→「Computed」をクリックすると表示されます。

青がコンテンツ、緑がpadding、黄色がborder、オレンジがmarginです。

関連の記事

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

△上に戻る