如何防止填充属性在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完全相同,并将其放入newdivnewdiv没有填充, anotherdiv padding-left: 20px 。 我得到同样的东西, newdiv的宽度将是220px。

我该如何解决这个问题?

添加属性:

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

将div放在newdiv中, width: automargin-left: 20px

从newdiv删除填充。

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

尝试这个

 box-sizing: border-box; 

如果你想在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> 

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

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

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

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

不,newdiv将保持200px宽。

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