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

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

ボックスモデル

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

 

NO. 名称 説明
コンテンツエリア テキストの文字や画像等が表示される部分です。
パディング コンテンツエリアとボーダーの間の部分です。
余白部分です。
背景色や背景画像はこの部分にも表示されます。
ボーダー 要素の周りの枠です。
背景色や背景画像はこの部分にも表示されます。
マージン ボーダーの外側にある余白です。
隣の要素と引き離すために使用します。
背景色や背景画像はこの部分には表示されません。
ボックス コンテンツエリア、パディング、ボーダー、マージンから構成されています。
- 幅と高さ
(box-sizing プロパティがcontent-boxのとき)

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

- 幅と高さ
(box-sizing プロパティがborder-box のとき)
widthプロパティとheightプロパティの値は、コンテンツエリアとパディングとボーダーまで含んだ幅と高さになります。
 - 背景色と背景の画像 背景色の上に背景画像が表示されます。背景画像が透明だと下にある背景色が見えます。

関連の記事

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

△上に戻る