HTML講習

ボックスモデルの視覚整形3（PDF 素材）

置換インライン要素

imgやobject、input、select、textareaのように、内容が外部のリソースやブラウザによって決定される要素。

非置換インライン要素

aやspan、em、strong、qのように、内容が外部のリソースやブラウザによって決定されない要素。

幅（width）

ボックスの内容領域の幅を指定するためのプロパティ。

適用は、ブロック要素及び置換インライン要素のみ。




width: 12px;（マイナス指定不可）

width: 120%;（マイナス指定不可。包含ブロックに対する％）

width: auto;（img要素など）

高さ（height）

ボックスの内容領域の高さを指定するためのプロパティ。

適用は、ブロック要素及び置換インライン要素のみ。




height: 12px;（マイナス指定不可）

height: 120%;（マイナス指定不可。包含ブロックに対する％）

height: auto;（img要素など）

幅と高さのルール

・非置換インライン要素には、widthとheightは適用されない。高さはline-heightで指定する。

・絶対配置されたブロック要素の包含ブロックの幅と高さは以下の通り。

• 幅：left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right
• 高さ：top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom

最小値（min-width, min-height）

ボックスの内容領域の幅と高さの最小値を指定するためのプロパティ。

最大値（max-width, max-height）

ボックスの内容領域の幅と高さの最大値を指定するためのプロパティ。

インラインボックスの高さ（line-height）

インラインボックスはブロック要素の包含ブロックに流し込まれるかたちで配置され、自動的に改行や折り返しされ、複数の行を生成する。

一行を校正する複数のインラインボックスが含まれている四角形の領域を行ボックスという。