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

width、max-width、margin: autoを使用して

前章に記載の通り、ブロックレベル要素は常に利用可能な全幅を占めます（可能な限り左側と右側に広がります）。

ブロックレベル要素の width これにより、要素がコンテナのエッジまで延びるのを防ぎます。その後、マージンをautoに設定することで、要素をコンテナ内で水平に中央寄せできます。要素は指定された幅を占め、残りのスペースは2つのマージン間で均等に分配されます：

この<div>要素の幅は500pxで、マージンはautoに設定されています。

注意：ブラウザのウィンドウサイズが要素の幅より小さい場合、上記の <div> が問題になります。ブラウザはページに水平スクロールバーを追加します。

この場合、 max-width ブラウザが小さなウィンドウを処理するのを改善できます。小さなデバイス上でウェブサイトが利用可能になるためには、これは非常に重要です：

この <div> 元素の最大幅は 500px、マージンは auto に設定されています。

ヒント：ブラウザのウィンドウサイズを 500ピクセル以下に調整して、2つの div の違いを確認してください！

これは上記の 2つの div の例です：

例

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

自分で試してみる