width、max-width、margin: auto;の使用

前の章で述べたように、ブロックレベルの要素は常に利用可能な全幅を占めます(可能な限り左右に広がります)。

ブロックレベル要素のwidthを設定すると、要素がコンテナの端にまで広がることがなくなります。次に、marginをautoに設定して、コンテナ内の要素を水平方向の中央に配置できます。要素は指定された幅を占め、残りのスペースは2つの余白に均等に分割されます。

ノート：上記の<div>に関する問題は、ブラウザウィンドウが要素の幅より小さい場合に発生します。次に、ブラウザは水平スクロールバーをページに追加します。

この状況では、代わりにmax-widthを使用すると、ブラウザによる小さなウィンドウの処理が改善されます。これは、サイトを小型デバイスで使用できるようにする場合に重要です。

ヒント：2つのdivの違いを確認するには、ブラウザウィンドウのサイズを幅500ピクセル未満に変更します。

上記の2つのdivの例を次に示します。