如何防止 padding 属性改变 CSS 中的宽度或高度？

Question

我正在使用 DIV s 创建一个站点。除了创建 DIV 之外，一切正常。我这样创建它们（示例）：

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

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

Let’s say I create another DIV named anotherdiv exactly the same as newdiv , and put it inside of newdiv but newdiv 没有填充和 anotherdiv 有 padding-left: 20px 。我得到同样的东西， newdiv 的宽度将是 220px。

我该如何解决这个问题？

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 中 不起作用。

原文由 Pramod 发布，翻译遵循 CC BY-SA 3.0 许可协议