填充与有边距的儿童

Question

让我们先说我了解盒子模型。在我作为开发人员的短暂时间里，我一直试图非常密切地使用语义 html 并使用响应式设计实践。我最近在一家新公司找到了一份 Jr. Developer 的工作，而我的 Sr. 坚决反对填充。就像他不想在任何情况下使用它一样。他希望我在所有东西上使用设置的高度和宽度，如果我需要模拟填充，我必须使用边距添加一个子 div。例如：

<div class="caption" style="padding: 5px;">
   Caption
</div>

需要变成

<div class="caption">
   <div class="captionContainer" style="margin:5px;">
       Caption
   </div>
 </div>

我试图弄清楚为什么会这样，以及我怎么可能解释为什么我认为这很糟糕，但它不起作用。这对我来说似乎很不对劲。他说这是因为 padding 拉伸了元素的宽度，对此我用 box-sizing:border-box 回应。

我必须照他说的做，但有时我们会谈论它，他似乎确实有点接受我的建议，但我认为我说的不是正确的事情。它实际上更好吗？如果不是，为什么？

这个问题可能会因为有点讨论而被关闭，但这让我发疯了，我不知道还能去哪里。

提前致谢！

Answer 1

这样解释他：

边距在块元素的外面，而内边距在里面。

使用边距将块与其外部的东西分开，并使用 padding 将内容从块的边缘移开。

Answer 2

但更好。当专门为此目的而创建的 CSS 属性 padding 几乎永远存在时，尝试使用其他方法向框添加填充是没有意义的。

无论如何，我能想到的一个反例是相邻的垂直边距可以collapse。

There are several ways to cancel margin collapse（哎呀，给元素填充就是一个！），但是这些方法设计并不是为了防止边距折叠，而是作为一个副作用，并且没有简单的“关闭开关”用于折叠。

不了解崩溃的性质和目的的作者会发现自己在处理它时遇到了麻烦。如果您要使用边距来模拟填充，您可能会遇到困难。不值得。

您给定的标记是边距折叠可能意外发生并引起头痛的一个典型示例：如果您的 .caption 元素上没有其他样式（如边框或填充），.captionContainer 的边距将与那些.caption，导致类似this 的事情发生。同样，这是一个很好的反例，当尝试使用边距模拟填充时会适得其反。

与边距折叠导致的潜在问题相比，老实说，我发现您使用 box-sizing: border-box 的建议是一个很好的案例，可以反对使用边距来模拟填充，同时保留您需要的确切宽度，因为它是设计的 解决这个问题。浏览器支持也相当不错（IE8+），所以除非你是为非常旧的浏览器设计，否则应该可以使用它。

使用边距来做 padding 显然应该做的事情还有其他几个潜在的陷阱，但边距崩溃是您将面临的最大问题之一。