填充与边缘的孩子

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几乎永远存在时，尝试使用其他方法向框添加填充是没有意义的。

无论如何，我能想到的一个反例是相邻的垂直边距可能会折叠这一事实。

有几种方法可以取消边距折叠（哎呀，给元素填充就是一种！），但这些方法并不是为了防止边距折叠而设计的，而是作为一种副作用，并且没有简单的“关闭开关” ”为了崩溃。

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

您给定的标记是边距折叠可能意外发生并导致头痛的一个主要示例：如果元素上没有其他样式.caption（例如边框或填充），则 的边距.captionContainer将与 的边距结合.caption，导致发生类似的情况。同样，这是一个很好的反例，说明尝试使用边距模拟填充最终会适得其反。

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

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