Question

我正在使用DIV创建一个网站。除非我创建DIV，否则一切正常。我像这样创建它们（例子）：

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

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

假设我创建另一个名为DIV的{{1}}与anotherdiv完全相同，并将其放在newdiv内，但newdiv没有填充和{ {1}}有newdiv。我得到同样的东西，anotherdiv的宽度将是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

使用width: auto和margin-left: 20px

在您的newdiv中添加div

从newdiv中删除填充。

The W3 Box model page has good info.

Answer 3

如果您想在不改变div大小的情况下缩进div中的文本，请使用CSS text-indent而不是padding-left。

＆＃13;

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

＆＃13;

<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

＆＃13;

Answer 4

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

即可

Answer 5

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

是的，这完全符合标准。这就是它应该如何运作。

假设我创建另一个名为DIV的DIV 另一个与newdiv完全相同，把它放在newdiv但newdiv中没有填充，而另一个有 padding-left：20px。我得到了同样的结果事情，newdiv的宽度将是220px;

不，newdiv将保持200px宽。

Answer 6

只需将div宽度更改为160px 如果你有一个20px的填充，它会增加你的div的宽度40px，所以你需要从宽度减去40px，以保持你的div看起来正常，并且没有扭曲，加上额外的宽度，你的文字都搞砸了。 / p>

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

6 个答案: