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

Question

我用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.

我该如何解决这个问题？

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.

Answer 2

把一个div与您newdiv width: auto和margin-left: 20px

从newdiv中删除填充.

W3 Box模型页面有很好的信息.

Answer 3

试试这个

box-sizing: border-box;

Answer 4

上面的很多答案都是正确的，但几乎没有提供任何解释，所以我决定为任何可能需要它的人添加这个。

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

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

* {
     box-sizing: border-box 
  }

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

border-box因此，对于宽度设置为 200px、两侧填充为 20px 的元素，其总宽度仍将保持 200px（160px 作为内容框，40px 作为填充）。

希望有帮助。您阅读了有关 css box-sizing 的更多内容

Answer 5

如果你想在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>

Answer 6

简单地说 box-sizing: border-box;