ボックスモデル

引き続き｢実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips;~｣を閲読中です。

今日は、ボックスモデルです。
(X)HTMLのボックスモデルは｢内部領域｣｢パディング｣｢ボーダー｣｢マージン｣の4つの領域からなります。

内部領域
要素の内容自体が持つ領域。テキストや画像など。
widthやheightはここの領域に対して適用される。

パディング
内部領域とボーダーの間の部分。
ようは内部領域とボーダーの間の余白(マージン？)

ボーダー
パディングの周辺部分。ボックスの囲み線？

マージン
ボーダーの外側の余白。

マージン

ボーダー

パディング

内容領域

ボックスモデルの横幅を算出する場合は、

ボックスモデルの横幅 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

となるそうです。

ただし、マージンに関しては、｢マージンの相殺｣と呼ばれるものがあり、
例えば、ブロックAが”margin-bottom: 10px"、ブロックBが"margin-top: 20px"の場合、
ブロックAとブロックBの間の余白は、10px + 20px = 30px ではなく、
ブロックAのmargin-bottomが相殺されて、実際の余白は20pxになるそうです。

ブロックA
margin-bottom: 10px

ここの余白は20px

ブロックB
margin-top: 20px