CSS 高さ、幅、および最大幅

この要素の高さは50ピクセルで、幅は100%です。

高さと幅のプロパティは、要素の高さと幅を設定するために使用されます。

高さと幅のプロパティは、パディング、ボーダー、またはマージンを含みません。これらは要素のパディング、ボーダー、およびマージンの内側の領域の高さ/幅を設定します。

高さと幅のプロパティには、以下の値が指定できます：

この要素は高さ200ピクセルで幅が50%です。

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

この要素は高さが100ピクセルで幅が500ピクセルです。

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

注意: 高さと幅のプロパティにはパディング、ボーダー、またはマージンは含まれません！これらは要素のパディング、ボーダー、およびマージンの内側の領域の高さ/幅を設定します。

最大幅のプロパティは、要素の最大幅を設定するために使用されます。

最大幅は、px、cmなどの長さの値、またはコンテイニングブロックの%で指定することができます。または、none（これがデフォルトです。最大幅がありません）に設定することもできます。

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

この状況では、代わりにmax-widthを使用することで、小さいウィンドウでのブラウザの処理を改善できます。

ヒント: ブラウザウィンドウを500pxより小さくドラッグして、2つの<div>の違いを確認してください！

この要素は高さが100ピクセルで最大幅が500ピクセルです。

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}