我正在创建一个网站与DIVs。除了创建DIV之外，一切都正常工作。我像这样创建它们(示例):
newdiv {
width: 200px;
height: 60px;
padding-left: 20px;
text-align: left;
}
当我添加padding-left属性时，DIV的宽度改变为220px，我希望它保持在200px。
让我们说我创建了另一个DIV命名为anotherdiv完全相同的newdiv，并把它放在newdiv，但newdiv没有填充和anotherdiv有填充-左: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+ */
注意:这在ie8以下版本中不起作用。
其他回答
在newdiv中添加一个div，宽度:auto, margin-left: 20px
从newdiv中删除填充。
W3 Box模型页面有很好的信息。
当我添加padding-left属性时， DIV的宽度变为220px
是的，这完全符合标准。本来就是这样的。
假设我创建了另一个DIV Anotherdiv和newdiv完全一样， 把它放到newdiv里面，但是是newdiv 没有填充和另一个div有吗 padding-left: 20 px。结果是一样的 Thing, newdiv的宽度为220px;
不，newdiv将保持200px宽。
只需要改变你的div宽度为160px 如果你有一个20px的填充，它会给你的div增加40px的额外宽度，所以你需要从宽度中减去40px，以保持你的div看起来正常，而不是因为额外的宽度而扭曲，你的文本都是乱七八糟的。
只需添加box-sizing: border-box;
这将在所有情况下工作，这额外的填充包括在预定义的宽度
box-sizing: border-box;
