Question

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

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

需要成为

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

我试图弄清楚为什么会这样，以及我怎么可能解释为什么我认为这很糟糕，但它不起作用。这对我来说似乎是错的。他说这是因为填充拉伸了一个元素的宽度，我用盒子大小来响应：border-box。

我必须按照他的说法去做，但有时我们会谈论它，而且他似乎对我的建议有点接受，但我认为我说的不对。它真的更好吗？如果不是，为什么？

这个问题可能会因为讨论而被关闭 - 但是这一直让我发疯，我不知道还能在哪里转。

提前致谢！

Answer 1

任何但更好。尝试使用其他方法将填充添加到框中是没有意义的，因为为此目的而制作的CSS属性padding已经存在，因为它已经存在了。

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

There are several ways to cancel margin collapse（哎呀，给元素填充是一个！），但是这些方法不是设计的用于防止边缘崩溃，就像它们作为边那样效果，并没有简单的“关闭开关”进行折叠。

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

您的给定标记是保证金崩溃可能意外发生并引起令人头疼的一个主要示例：如果您的.caption元素上没有其他样式（如边框或填充），.captionContainer的边距将与.caption的那些结合，导致this之类的事情发生。同样，这是一个很好的反例，当尝试使用边距模拟填充时，最终会回火。

与保证金崩溃导致的潜在问题相比，老实说，我建议您使用box-sizing: border-box使用边距来模拟填充，同时保留所需的确切宽度，因为它是设计< / em>来解决这个问题。浏览器支持也相当不错（IE8 +），所以除非你设计的是真正的老浏览器，否则应该可以使用它。

使用保证金来做padding显然要做的事情还有其他几个潜在的陷阱，但保证金崩溃是你将面临的最大问题之一。

Answer 2

这样解释他：

边距位于块元素的外部，而填充位于内部。

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

填充与边缘的孩子

2 个答案:

这样解释他：