255

我正在用DIVs 创建一个网站。除了我创建一个 DIV 之外，一切都在进行中。我像这样创建它们（示例）：

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

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

假设我创建了另一个与 完全相同的DIV名称，并将其放在其中但没有填充并且具有. 我得到同样的东西，宽度将是 220 像素。anotherdivnewdivnewdivnewdivanotherdivpadding-left: 20pxnewdiv

我该如何解决这个问题？

4

8 回答 8

433

添加属性：

-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 中不起作用。

于 2012-08-20T08:58:03.620 回答
39

在你的 newdiv 中放一个 divwidth: auto和margin-left: 20px

从 newdiv 中删除填充。

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

于 2009-04-22T22:07:18.747 回答
33

尝试这个

box-sizing: border-box;
于 2015-09-10T12:46:33.553 回答
12

如果您想在 div 中缩进文本而不更改 div 的大小，请使用 CSStext-indent而不是padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}
<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

于 2015-01-15T02:28:15.733 回答
11

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

于 2017-06-24T03:19:34.317 回答
1

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

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

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

不，newdiv 将保持 200px 宽。

于 2009-04-22T22:30:22.747 回答
0

这在所有情况下都有效，预定义宽度中包含额外的填充

box-sizing：边框框；

于 2022-01-30T17:05:50.070 回答
-2

如果您有 20px 的填充，只需将您的 div 宽度更改为 160px 它会为您的 div 的宽度增加 40px ，因此您需要从宽度中减去 40px 以保持您的 div 看起来正常并且不会因额外的宽度而扭曲它和你的文字都搞砸了。

于 2012-04-14T18:32:33.680 回答