CSSの高さと幅
CSSheightとwidthプロパティは、要素の高さと幅を設定するために使用されます。
CSSmax-widthプロパティは、要素の最大幅を設定するために使用されます。
CSS設定の高さと幅
heightandプロパティは、要素のwidth高さと幅を設定するために使用されます。
高さと幅のプロパティには、パディング、境界線、またはマージンは含まれません。要素のパディング、境界線、およびマージンの内側の領域の高さ/幅を設定します。
CSSの高さと幅の値
heightおよびプロパティのwidth値は次のとおりです。
auto-これはデフォルトです。ブラウザが高さと幅を計算しますlength-高さ/幅をpx、cmなどで定義します。%-高さ/幅を包含ブロックのパーセントで定義しますinitial-高さ/幅をデフォルト値に設定しますinherit-高さ/幅はその親の値から継承されます
CSSの高さと幅の例
例
<div>要素の高さと幅を設定します。
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
例
別の<div>要素の高さと幅を設定します。
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
注：height andwidthプロパティには、パディング、境界線、またはマージンが含まれていないことに注意してください。要素のパディング、境界線、マージンの内側の領域の高さ/幅を設定します。
最大幅の設定
このmax-widthプロパティは、要素の最大幅を設定するために使用されます。
は、px、cmなどの長さの値、または含まれているブロックのパーセント（％）でmax-width指定するか、noneに設定できます（これはデフォルトです。最大幅がないことを意味します）。
上記の問題は<div>、ブラウザウィンドウが要素の幅（500px）よりも小さい場合に発生します。次に、ブラウザはページに水平スクロールバーを追加します。
代わりに、この状況で使用max-widthすると、ブラウザの小さなウィンドウの処理が改善されます。
ヒント：ブラウザウィンドウを幅500px未満にドラッグして、2つのdivの違いを確認してください。
注：何らかの理由
で同じ要素で
widthプロパティとプロパティの
両方を使用し、プロパティの値がプロパティよりも大きい場合
。プロパティが使用されます（
プロパティは
無視されます）。max-widthwidthmax-widthmax-widthwidth
例
この<div>要素の高さは100ピクセル、最大幅は500ピクセルです。
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
自分で試してみてください-例
設定するこの例は、さまざまな要素の高さと幅を設定する方法を示しています。
高さと幅を設定するこの例は、パーセント値を使用して画像の高さと幅を設定する方法を示しています。
の最小幅と最大幅を設定するこの例は、ピクセル値を使用して要素の最小幅と最大幅を設定する方法を示しています。
高さを設定するこの例は、ピクセル値を使用して要素の最小の高さと最大の高さを設定する方法を示しています。
すべてのCSSディメンションプロパティ
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |