前の章で説明したように、ブロックレベルの要素は常に利用可能な全幅を占めます (できるだけ左右に引き伸ばされます)。
ブロックレベル要素の width を設定すると、要素がコンテナの端まで拡張されなくなります。 次に、マージンを auto に設定して、要素をコンテナ内で水平方向の中央に配置できます。 要素は指定された幅を占め、残りのスペースは 2 つの余白に均等に分割されます。
注: ブラウザ ウィンドウが要素の幅より小さい場合、上記の <div> は壊れます。 ブラウザによってページに水平スクロール バーが追加されます。
この場合、max-width を使用すると、ブラウザによる小さなウィンドウの処理が改善されます。 これは、サイトを小型デバイスで使用できるようにするために重要です。
ヒント: 2 つの div の違いを確認するには、ブラウザ ウィンドウのサイズを 500 ピクセル未満に変更してください。
上記の 2 つの div の例を次に示します。
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}