css - border-box で max-height を使用する

Question

この例max-heightでは、ボックスにが適用されていないのはなぜですか? ボーダーボックスモードは無視されているようですが (Chrome でテスト済み)、直感に反するようです。

score 5 · Accepted Answer

box-sizingプロパティは無視されません。値は次のようborder-boxに動作します。

パディングは上下で 100px に設定されているため、要素の 200px がheightパディングによって消費されます。

200pxの a を指定するheightと、200 - 200 が 0 であるため、計算された高さは 0 になります。

height201pxを指定すると、計算される高さは 1 になります。

box-sizingドキュメントから：

コンテンツの幅と高さは、指定された 'width' と 'height' プロパティからそれぞれの辺のパディング幅を差し引いて計算されます。コンテンツの幅と高さを負にすることはできないため、この計算の下限は 0 です。

これは、パディングの代わりにボーダーを使用して簡単に実証できます。

#test {
  background: #000;
  border-width: 100px 0;
  border-style: solid;
  border-color: red;
  height: 200px;
  box-sizing: border-box;
}

ここで、要素には黒い背景と赤い境界線がありますが、その高さが上下の境界線の幅の合計に等しいため、要素は 0px で計算されます。

例 1

ご覧のとおり、箱は完全に赤いです。要素には高さがないため、黒い背景は表示されません。height要素をに調整すると、次のよう250pxになります。

例 2

ここで計算された要素の高さは 50px なので、50px の背景が表示されます。残りの 200px は境界線によって消費されます。

1 に答える 1