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

HTML&CSS

boxmodel

(X)HTML文章の要素ツリーはそれぞれボックスモデルという四角形の領域を持っています。
ボックスモデルは上図のようなcontent(内容領域)、padding、border、marginの4つの領域で構成されています。

内容領域

要素ツリーの内容自身にあたります。テキストや画像などです。
たとえばブロック要素もしくは置換要素であれば、そのサイズは ‘width’ および ‘height’プロパティで決まります。

*置換要素とは:テキストでは無い何かに置き換えられるものです。属性などを用いて大きさが定められた、普通のテキストとは違ったものです。具体的には、imgやhr、iframeなどが主なものとしてあげられます。CSS内ではブロック要素、インライン要素と区別された扱いになります。

パディング

ボーダーと内容領域の間の余白部分になります。また、この領域には内容領域で指定した背景色が適用されます。背景画像についてもこの領域を計算に加えて表示します。

ボーダー

パディングの外側にある枠の領域部分をボーダーと呼びます。
ボーダーは内容領域に適用した背景の上に重ねて描かれます。従ってボーダーの下にある背景は見えませんが、スタイルが点線・破線・二重線のときに隙間から背景を確認することができます。ボーダー幅が0ならボーダー辺とパディング辺は同一になります。

マージン

ボーダーの外の余白部分です。この部分には内容領域の背景は入らない透明となります。そのため親要素の背景が見える結果となります。マージン幅が0ならマージン辺とボーダー辺は同一になります。

ボックスモデルの横幅計算

ボックスモデルの横幅を計算する場合は以下のとおり行います。

(内容領域 widthプロパティで指定)+(左パディング+右パディング)+(左ボーダー+右ボーダー)+(左マージン+右マージン)

*IE6以下あるいはIE後方互換表示ではwidthプロパティは内容領域+パディング+ボーダーの大きさを表します。これはコーディングの時に重要な問題点となっていました。けれども今となってもうIE6対策ももう過去のものとなりつつあります。

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました