255

sでサイトを作っていますDIV。DIV を作成するときを除いて、すべてうまくいっています。私は次のように作成します（例）：

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

padding-leftプロパティを追加すると、幅がDIV220px に変更され、200px のままにしたい。

とまったく同じDIV名前の別のものを作成し、それを の中に入れますが、パディングはなく、 を持っているとしましょう。私は同じことを得る、の幅は220pxになります。anotherdivnewdivnewdivnewdivanotherdivpadding-left: 20pxnewdiv

この問題を解決するにはどうすればよいですか?

4

8 に答える 8

433

プロパティを追加:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

注:これは、バージョン 8 未満の Internet Explorer では機能しません。

于 2012-08-20T08:58:03.620 に答える
39

width: autoandを使用して、newdiv に div を配置します。margin-left: 20px

newdiv からパディングを削除します。

W3 Box モデルのページに良い情報があります。

于 2009-04-22T22:07:18.747 に答える
33

これを試して

box-sizing: border-box;
于 2015-09-10T12:46:33.553 に答える
1

padding-left プロパティを追加すると、DIV の幅が 220px に変わります

はい、まさに基準通りです。それが機能するはずです。

newdiv とまったく同じ anotherdiv という名前の別の DIV を作成し、それを newdiv 内に配置するとしますが、newdiv にはパディングがなく、anotherdiv には padding-left: 20px があります。同じことがわかります。newdiv の幅は 220px になります。

いいえ、newdiv は 200px 幅のままです。

于 2009-04-22T22:30:22.747 に答える
-2

20px のパディングがある場合は、div の幅を 160px に変更するだけで、div の幅に 40px 余分に追加されるため、div を正常に保ち、余分な幅で歪まないようにするには、幅から 40px を差し引く必要があります。あなたのテキストはすべてめちゃくちゃです。

于 2012-04-14T18:32:33.680 に答える