如何防止填充属性在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有填充-左:20px。我得到同样的东西，newdiv的宽度将是220px。

我该如何解决这个问题?

当前回答

如果你想在不改变div大小的情况下缩进div内的文本，使用CSS text-indent代替padding-left。

宣传画{ indent: 1 em; ｝ .border { 边框样式:固体; ｝ < div class = "边境”> 不缩进 < / div > < br > <div class="border缩进"> 缩进 < / div >

其他回答

只需添加box-sizing: border-box;

在newdiv中添加一个div，宽度:auto, margin-left: 20px

从newdiv中删除填充。

W3 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的内容

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

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

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

不，newdiv将保持200px宽。

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

box-sizing: border-box;

推荐文章