如何防止填充属性在CSS中改变宽度或高度？

我正在用DIV创build一个站点。 除了当我创build一个DIV时，一切正常。 我创build它们是这样的（例子）：

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

当我添加padding-left属性时， DIV的宽度变为220px，我希望它保持在200px。

假设我创build了另一个名为anotherdiv DIV ，与anotherdiv完全相同，并将其放入newdiv但newdiv没有填充， anotherdiv padding-left: 20px 。 我得到同样的东西， newdiv的宽度将是220px。

我该如何解决这个问题？

Answer 1

添加属性：

 -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。

Answer 2

将div放在newdiv中， width: auto和margin-left: 20px

从newdiv删除填充。

W3 Box模型页面有很好的信息。

Answer 3

尝试这个

 box-sizing: border-box; 

Answer 4

如果你想在div中缩进文本而不改变div的大小，可以使用CSS text-indent而不是padding-left 。

 .indent { text-indent: 1em; } .border { border-style: solid; } 

 <div class="border"> Non indented </div> <br> <div class="border indent"> Indented </div> 

Answer 5

只需添加box-sizing: border-box;

Answer 6

当我添加填充左侧属性时，DIV的宽度变为220px

是的，这完全是按照标准。 这就是它应该如何工作。

假设我创build了另一个名为anotherdiv的DIV，与newdiv完全相同，并将其放入newdiv中，但newdiv没有填充，anotherdiv填充了左边：20px。 我得到同样的东西，newdiv的宽度将是220px;

不，newdiv将保持200px宽。

Answer 7

只是改变你的div宽度为160px，如果你有一个20px的填充它增加了40px额外的div的宽度，所以你需要从宽度减去40px，以保持你div看起来正常，不扭曲的额外的宽度，你的文字都搞砸了。