26

テキストエリアがあり、それにCSSを追加しました

<textarea watermark="Have a question? ..." class="test-input" rows="4" cols="15" name="">Have a question? ...</textarea>

そしてそれに適用されるCSS-

.test-input {
    border: 1px solid #D0D0D0;
    border-radius: 3px 3px 3px 3px;
    color: #646464;
    float: left;
    font-family: Arial;
    font-size: 12px;
    height: 20px;
    margin: 0 0 0 15px;
    padding: 5px;
    resize: none;
    width: 264px;
}

そして、その中にいくつかのパディングがあるテキスト領域を取得します。完全に正常に機能する場合、テキスト領域の高さは20pxになり、5pxのパディングは高さに含まれません。ただし、場合によっては、テキスト領域の高さにパディングが含まれ、高さが8pxに減少します。それがオーバーライドされている場合、私はcssを探しましたが、見つかりませんでした。そして、両方の場合の結果を比較しました。左は縮小された高さ、右は予想される高さです。

ここに画像の説明を入力してください この問題を修正できます。他の場合は、高さを具体的に管理し、！importantを追加するか、JavaScriptを使用します。しかし、私はここでそのような効果をもたらしている原因は何であるのか疑問に思っています。なぜ、どのような場合に、高さまたは幅にパディングが含まれるのですか？

4

3 に答える 3

47

これは、box-sizing使用した属性によって異なります。

  • border-boxこれは、CSSで定義/計算されたボックスの高さと幅に、それに適用されたパディングと境界線の幅も含まれることを意味します
  • content-boxはデフォルトの動作であり、ボックスの定義/計算された高さと幅にパディングと境界線の幅が追加されます。

左の例のように設定box-sizing: border-boxすることで、要素の高さを20pxに定義しました。これは、ブラウザが定義された高さから境界線（1px上、1px下）とパディング（5px上、5px下）を差し引いて、残り8pxだけを残すため、実際のコンテンツボックスの高さは8pxのみになることを意味します。行全体の高さを含めるには少し短すぎます（したがって、単語が途切れているように見えます）。

于 2013-03-11T10:16:06.673 に答える
2

jQueryはこれらの定義と一致しているようです。

  • .height()パディングは含まれません（ボックスサイズ：border-boxの場合でも）
  • .innerHeight()パディングは含まれますが、境界線は含まれません
  • .outerHeight()パディングとボーダーを含む
  • .outerHeight(true)パディングとボーダーとマージンが含まれます

それぞれが設定または取得できます。$element.outerHeight(desired_height_including_margins, true);

ここに画像の説明を入力してください

ここに画像の説明を入力してください

ここに画像の説明を入力してください

（リンク先のページから抜粋した画像です。）

于 2019-09-29T18:28:34.340 に答える
0

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizingを参照してください。

このbox-sizingプロパティを使用して、この動作を調整できます。

  • content-boxデフォルトのCSSボックスサイズ設定動作を提供します。要素の幅を100ピクセルに設定すると、要素のコンテンツボックスの幅は100ピクセルになり、境界線またはパディングの幅が最終的にレンダリングされる幅に追加され、要素の幅が100ピクセルより広くなります。
  • border-box要素の幅と高さに指定した値の境界線とパディングを考慮するようにブラウザに指示します。要素の幅を100ピクセルに設定すると、その100ピクセルには、追加した境界線またはパディングが含まれ、コンテンツボックスは縮小して、その余分な幅を吸収します。これにより、通常、要素のサイズ設定がはるかに簡単になります。
于 2020-05-03T09:21:45.187 に答える