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

问题描述

我使用 DIV 创建了一个网站。一切正常，除非我创建一个DIV。我创建他们像这样（示例）：

I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example):

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

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

When I add the padding-left property, the width of the DIV changes to 220px, and I want it to remain at 200px.

假设我创建了另一个 DIV 命名为 anotherdiv 与 newdiv ，并将其放在 newdiv 里面，但 newdiv 没有填充和 anotherdiv 有 padding-left：20px 。我得到相同的东西， newdiv 的宽度将是220px。

Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px.

如何解决这个问题？ / p>

How can I fix this problem?

推荐答案

添加属性：

-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以下版本。

Note: This won't work in Internet Explorer below version 8.

这篇关于如何防止padding属性更改CSS中的宽度或高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！