1

標準によると、CSS で HTML 要素にパディングを追加すると、定義された量だけ要素が大きくなります。例えば：

.elem {
  width: 100px;
  height: 100px;
  padding: 20px;
}

.elem の辺に 20 ピクセルが追加され、実際の幅と高さが合計 140 ピクセルになります。

これは実際には Web デザインではかなり非現実的であるため (結果のサイズを計算して追跡する必要があるため)、代わりに何らかの方法で逆のことを行うことができるかどうか疑問に思っていました. パディングを設定すると、代わりに内側のテキスト領域が縮小されます。そのため、要素は 100*100px のままで、内部に 20px のパディングがあり、パディングを試しているときにデザインが台無しになることを心配する必要はありません。

これは可能ですか？おそらく、CSS にコンパイルされる言語 (あまり調べていない) を介してですか? そしておそらくもっと些細な質問です: そもそもなぜこのように機能するのでしょうか?

4

2 に答える 2

3

使用box-sizing:

elemSelector {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

プロパティのこの値は、要素の宣言されたサイズに と が含まれることを宣言しborderますpadding。

参考文献:

于 2013-02-14T21:55:18.373 に答える
0

現在、あなたが求めていることを実行することは不可能です。CSS の「幅」の値を定義する前に、幅全体のパディングを考慮する必要があります。詳細については、CSS ボックス モデルを参照してください。これは、CSS3 と互換性があるかどうかに関係なく、すべての Web 対応デバイスで正しいサイズを保証する唯一の方法です。

于 2013-02-14T22:01:47.247 に答える