html - 如何防止填充属性更改 CSS 中的宽度或高度？

Question

我正在创建一个带有 DIV 的网站。除了我创建一个 DIV 之外，一切都在进行中。我像这样创建它们(示例):

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

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

假设我创建了另一个名为 anotherdiv 的 DIV 与 newdiv 完全相同，并将其放在 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+ */

注意:这在 Internet Explorer 8 以下版本中不起作用。