非置換インラインボックス : css

Tweet

Pocket

非置換インラインボックスの覚書。

非置換インライン要素から生成されるボックスを非置換インラインボックスと呼びます。

非置換インラインボックスの性質

1. 非置換インラインボックスもブロックボックスと同様に内容,パディング,ボーダー,マージンを設定できます。しかし非置換インライン要素は行内の一部として配置されるため、上下のマージンの設定値は無視されます。
2. 非置換インラインボックスの内容(content)の幅は、内容領域により自動的に設定され、ブロックボックスのwidthプロパティのように明示的に指定する方法はありません。
3. 非置換インラインボックスの内容(content)の高さは内容領域により自動的に設定され、ブロックボックスのheightプロパティにように明示的に指定する方法はありません。
4. インラインボックス全体の高さはline-heightプロパティで設定します。

非置換インラインボックスの幅

内容領域の幅 + 左右のパディング + 左右のボーダー + 左右のマージン

非置換インラインボックスの高さ

非置換インライン要素に指定されたline-heightプロパティーは、そのインラインボックスの正確な高さになります。
line-heightプロパティーの指定がない場合は内在領域によって自動的に高さが決定します。

非置換インラインボックスのパディング,ボーダー,マージン

益子貴寛著「Web標準の教科書 XHTMLとCSSでつくる”正しい”Webサイト」では次のように説明されています。

非置換インライン要素の高さの計算には、マージン、ボーダー、パディングは含まれず、それらの領域はインラインボックスの周囲に表示される。つまり、行ボックス全体の高さが、内部に含んでいるインラインボックスの外辺(マージンの辺)よりも短い場合、ボーダーやパディングが隣接する行ボックスにはみ出すことになる。この場合、インラインボックスのボーダーやパディングが行ボックスによって切り落とされても良いとされている

非置換インライン要素は行内の一部として配置されるため、上下のマージンを設定しても無視されることに注意が必要です。