CSSのボックス領域

ボックス領域とは

各要素が持っている領域

ボックスを構成するもの

・コンテンツ領域（content area）
・余白（padding）
・枠（border）
・マージン（margin）

ボックス幅

内容領域の幅＋左右余白＋左右枠＋左右マージン

ボックス高さ

内容領域の高さ＋上下余白＋上下枠＋上下マージン

Firefoxでボックス領域をきちんと表示させるコツ

・floatを使う場合は、widthを数値で指定する
・内部でfloatを使った親のmarginがうまく働かない場合、内部の最後にクリア用の空divを入れる　→　<div style="clear:both;"></div>
・空値による空白エリアを置きたい場合、「&nbsp;」を入れておく　【例】<div class="box">&nbsp;</div>

縦横が不明な画像について、縦横比を維持しながら一定の大きさ内にする

max-width: 100px;
max-height: 100px;