CSSで、要素の幅を指定するwidthプロパティに関する解説です。
widthプロパティは、要素の幅を指定するプロパティです。
widthプロパティの書式は、以下のようになります。
width: 値値としては、以下のものが取れます。
inheritautoなどの他の要因により適宜横幅が決められます(デフォルト)。
値に負値を指定した場合はエラーとなります。
例えば、HTMLの<blockquote>要素において、幅を親要素の80％としたい場合は、
blockquote {width: 80%;}
と記述します。
置換インライン要素の場合、当該オブジェクト固有の横幅があり、この横幅と異なるwidthプロパティ値が与えられた場合、適宜拡大縮小する事が許されます。
仕様上、widthプロパティを当てた結果、当該要素のボックスが狭くなり過ぎて要素が入り切らなくなっても、適宜ボックスを押し拡げるような事はしません。
このため、入り切らなくなった場合の挙動を別途overflowプロパティで指定しておく事をお勧めします。
ネットスケープ 4.xでは、インライン要素にwidthプロパティを当ててはいけません。
インライン要素にwidthプロパティを当てると、正常に表示されなくなります。
また、auto値を実装しておりません。
CSS第二水準までは、widthプロパティとheightプロパティは仕様上全く無関係なものとなっておりました。
すなわち、CSS第二水準まででは、置換要素に於いて、
幅は元の要素の幅そのものとなり、高さだけがheightプロパティの影響を受ける事になります。
すなわち、仕様上では上記の場合、高さだけが引き伸ばされたり縮められたりして、縦横比が変動する事になる訳です。
勿論、逆に
の場合は、幅だけが引き伸ばされたり縮められる事になります。
しかしながら、実際には殆ど全てのCSS対応ユーザエージェントは、上記のような場合には幅もheightプロパティに合わせて拡大/縮小されます。つまり縦横比が変わらないように表示されます。
このように実装が仕様に従っていない実情から、現在策定中のCSS第二水準第一改訂版(CSS 2.1)では、上記のように片方がauto値、もう片方が非auto値の場合にはauto値を与えられたプロパティももう片方に併せて設定されるものとする、すなわち現状を追認する予定になっております。
以下に、現在策定中のCSS第二水準第一改訂版での該当箇所を挙げておきます(いずれも英語です)。
インターネットエクスプローラでは、以下の場合を除いて、widthプロパティで定められた横幅には、パディング(paddingプロパティなどで指定)と枠線(ボーダ)の幅(border-widthプロパティなどで指定)が加算されたものとなります。
