記事一覧

width プロパティの適用範囲

 posted by suzu
CSSの基礎知識

CSS でデザインをしていく際には、(特にボックスに対して) width プロパティで
幅を指定したいことは多いかと思います。
そもそも width プロパティ ってどこからどこまでの幅を決めるものなんでしょう?

【width プロパティの適用範囲】
widthプロパティは、本来、要素の内容自体に対するもので、
これに padding で余白がとられて border が引かれ、その外側に margin で
また余白がとられるといった感じになるのが CSS 的には正しい解釈です。
「正しい解釈」と表現したのは、実は IE では border の外側の部分まで を
width プロパティの適用範囲とする「間違った解釈」をするのです。
やっかいですね・・・

marginプロパティ、paddingプロパティ、そして border と共に図解してみます。
width-ie

width プロパティ を絶対値 (px とか pt とか) で指定する際には、
[ width + 左右の margin + 左右の padding + 左右の border ] の計の幅が、
表示(できる)領域の幅に収まるようにしておかないと
思ったようなレイアウトになりません。これ、鉄則ですね。
 

【IE による width プロパティの罠】
「折り返しをしたくない」といったような理由で、内容によって
厳密に「要素の内容自体を表示する領域はこれだけの幅を確保したい!」
という場合もあるかと思います。
(本来はこれが正しいのですが)
「width = 要素の内容自体の幅」 としてだけ覚えてしまっていると、
「width を固定したまま 内側の余白である padding を増やす」
といったことをした場合、どうなるでしょう?
IE 以外の 「正しい解釈」 のブラウザでは
「要素の内容自体の幅」 は変わりませんが、
IE のような 「間違った解釈」 のブラウザでは、
padding を増やせば増やすほど
「要素の内容自体の幅」 が縮まってしまいます。
IE の場合、
[ 要素の内容自体の幅 = width - 左右の padding - 左右の border ]
となってしまうので、注意が必要なのです。

やっぱり、IE はやっかいですね・・・

関連記事

eyecatch_css

セレクタの優先順位

CSS命令を適用する範囲である「セレクタ」には優先順位があります。 これが分かっ...

記事を読む

eyecatch_css

float の指定と挙動

今回は、先の記事 「ブロックレベルとインライン」 で少し解説した display...

記事を読む

eyecatch_css

セレクタの種類

WordPressに限った話ではないですが、CSSを使ってページデザインする際に...

記事を読む

カレンダー

2019年10月
« 7月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
PAGE TOP ↑