CSS レイアウト - width と max-width

width, max-width および margin: auto; の使用

前章で述べたように、ブロックレベル要素は常に（可能な限り左右に広がって）使用できる幅全体を占めます。

ブロックレベル要素の width を設定することで、コンテナの端から外に出て引伸ばされることを防ぐことができます。 その後で、要素をコンテナ内の横方向中央に配置するために、マージンを auto に設定することができます。 要素は指定した幅だけを占め、残りのスペースは左右のマージンに均等に割り振られます：

注: ブラウザウィンドウが要素の幅よりも小さい場合、上の <div> で問題が発生します。 ブラウザはそのページに横スクロールバーを追加します。

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

チップ: 2 つの div 違いを見るため、ブラウザウィンドウのサイズを 500px 未満に変更してください！

上記 2 つの div の例を以下に示します：