如何防止padding属性更改CSS中的宽度或高度？

我正在创建一个带有DIV的网站。一切正常，除了创建DIV时。我这样创建它们（示例）：

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

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

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

我该如何解决这个问题？

添加属性：

-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中无法使用。

使用width: auto和在您的newdiv中放置一个divmargin-left: 20px

从newdiv删除填充。

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

试试这个

box-sizing: border-box;

如果您希望缩进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;

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

是的，这完全符合标准。那应该是这样的。

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

不，newdiv将保持200px宽。

只需将div的宽度更改为160px（如果您的填充为20px，则会为div的宽度增加40px），因此您需要从该宽度中减去40px，以使div看起来正常并且不会因其上的额外宽度而失真您的文字全弄乱了。