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

Posted 2023-03-06

【中文标题】如何防止填充属性更改 CSS 中的宽度或高度？

【英文标题】：How do I prevent the padding property from changing width or height in CSS?

【发布时间】：2010-10-21 05:38:41

【问题描述】：

我正在使用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。

我该如何解决这个问题？

【问题讨论】：

我很遗憾地说，但我喜欢 IE 处理这个问题的方式......对我来说更有意义......

【参考方案1】：

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

【讨论】：

这与其他答案已经在这里说的完全一样。

【参考方案2】：

添加属性：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

注意：这在 Internet Explorer 8 以下版本中不起作用。

【讨论】：

这是一个很好的边框解决方案，但是这对填充有什么帮助呢？

这简直是魔法！ - 它修复了我们都知道和讨厌的盒子模型！即让它按照直觉建议的方式工作 - 而不是规范 - 但据我所知也没有破坏任何规范：D这篇文章很好地澄清了它......***.com/questions/779434/…

@technicalbloke 你的链接只是回到这个问题。

哎呀，复制粘贴了。这是我要分享的链接...paulirish.com/2012/box-sizing-border-box-ftw

你们中的许多人应该考虑下面的宽度：自动技巧。跨浏览器工作，代码更少等。

【参考方案3】：

试试这个

box-sizing: border-box;

【参考方案4】：

如果您想在不更改 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>

【讨论】：

这是我发现的唯一适用于我的固定宽度 div 的解决方案。不幸的是，box-sizing 并没有阻止 padding 影响宽度，所以非常感谢您指出这个很棒的小属性。

【参考方案5】：

用width: auto 和margin-left: 20px 在你的newdiv 中添加一个div

从 newdiv 中删除填充。

The W3 Box model page has good info.

【讨论】：

既然可以使用一个 div，为什么还要使用两个 div？

【参考方案6】：

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

【讨论】：

这和@rvarcher给出的答案一样。

【参考方案7】：

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

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

假设我创建了另一个名为 anotherdiv 和 newdiv 完全一样， 并将其放入 newdiv 但 newdiv 没有填充，而另一个div 有 填充左：20px。我也一样 事情，newdiv的宽度将是220px；

不，newdiv 将保持 200px 宽。

【讨论】：

Guffa，这根本不是标准的工作方式。填充绝对不应该影响应用它的元素的尺寸。恕我直言，您是否可能将“填充”与“边距”混淆？

是的，填充肯定会影响元素的尺寸。我觉得是你自己搞糊涂了……你怎么提出margin会影响元素的尺寸？

实际上，你知道我认为我们在某种程度上都是对的。我已经习惯于应对我完全忘记了标准的影响。我在这里找到了一个很好的解释quirksmode.org/css/box.html

所以，我很抱歉 Guffa 先生。但出于实际目的（毕竟这是我们正在谈论的）我的建议仍然很好，不是吗？

嗯，你是对的，因为有一个盒子模型错误，但它不适用于这个问题...... :)