max-widthプロパティは要素の生成するボックスの最大の横幅(これ以上は広げない設定)を設定します。
max-widthプロパティに指定できる値は、それぞれ以下の意味を示します。
noneem", "px" などの単位識別子を伴う数値で指定(負の値は不正)%)による割合で指定(負の値は不正)最大の横幅に対して、最小の横幅(これ以上は縮めない設定)は、min-widthプロパティで設定します。max-widthプロパティと min-widthプロパティは同時に指定可能です。max-widthプロパティで指定した横幅の値よりも、min-widthプロパティで指定した横幅の値が大きい場合、min-widthプロパティの値は、max-widthプロパティと同じ値に割り当て直されます。また、widthプロパティで指定した横幅の値が、max-widthプロパティで指定した値より大きい場合や min-widthプロパティで指定した値より小さい場合、これらの指定値は、widthプロパティの値として割り当て直されます。
max-widthプロパティに対応していません。max-widthプロパティに対応しています。Windows版Internet Explorer 6、及び Macintosh版Internet Explorer 5 は max-heightプロパティに対応していません。Windows版については、Internet Explorer 7 より対応しています。
div {
max-width : 45em ;
padding : 1em ;
border-right :3px dotted orange ;
}
このサンプルでは、最大の横幅を "45em" ということで、1行のテキストの長さを約45文字分に制限しています。しかし、max-widthプロパティは widthプロパティとは違いボックスの横幅を固定することはありません。最大の横幅を "45em" に制限しているだけで、画面の表示域が狭められると、テキストなどの行内容は表示域に応じて、はみ出すことなくボックス内に収まろうとします。つまり、一定の横幅の制限を設けた上で、どんなに解像度の小さな環境でも横スクロールを生じさせることのない快適な観覧状況の提供を可能にします。このように max-widthプロパティは、ユーザーの環境に幅広く対応できる融通性の高いデザインを実現するのに有用です。