如何防止填充属性在CSS中改变宽度或高度?

我正在用DIVs创建一个站点。除了创建DIV之外，一切都正常工作。我像这样创建它们(示例):

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

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

假设我创建了另一个DIV，命名为anotherdiv，与newdiv完全相同，并将其放入newdiv中，但newdiv没有填充，而anotherdiv有padding-left: 20px。我得到同样的东西，newdiv的宽度将是220px。

我该如何解决这个问题?

236500 次浏览
小开

在你的newdiv中添加一个带有width: auto和margin-left: 20px的div

从newdiv中删除填充。

W3 Box模型页面有良好的信息

小开

当我添加padding-left属性时， DIV的宽度变为220px

是的，这完全符合标准。本来就是这样的。

假设我创建了另一个DIV名为 Anotherdiv和newdiv完全一样， 把它放到newdiv里面，但是是newdiv 没有填充和另一个div有吗 padding-left: 20 px。结果是一样的 东西，newdiv的宽度将是220px;

不，newdiv将保持200px宽。

小开

只需更改div宽度为160px 如果你有一个20px的填充，它会为你的div增加40px的额外宽度，所以你需要从宽度中减去40px，以保持你的div看起来正常，而不是因为额外的宽度而扭曲，你的文本都是乱七八糟的

小开

添加属性:

-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以下版本中的不会起作用。

小开

如果你想在不改变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;
小开

简单地添加box-sizing: border-box;

小开

这将在所有情况下工作，这额外的填充包括在预定义的宽度

box-sizing: border-box;

小开

上面的很多答案都是正确的，但没有提供什么解释，所以我决定把它添加给任何可能需要它的人。

默认情况下，每个元素box-sizing参数都被设置为content-box。 这意味着，如果你设置一个元素宽度为200px，然后在水平两端添加一个20px的填充，这将导致该元素的总宽度为240px

要解决这个问题，你只需要更新box-sizing参数，并将其设置为你的css中的border-box。或者，您可以通过简单地添加以下内容来为所有元素执行此操作。

* {
box-sizing: border-box
}

这将告诉浏览器考虑您为元素的宽度和高度指定的值中的任何边框和填充。

因此，对于一个设置为border-box的元素，宽度为200px，两侧填充为20px，它的总宽度仍将保持200px(内容框为160px，填充为40px)。

希望这能有所帮助。请阅读更多关于css box-sizing的内容


提交答案