Margin 用边距填充与子对象

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

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

说明文字

需要成为

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

说明文字

我试着弄明白为什么会这样，我怎么可能解释为什么我认为这样不好，但它不起作用。这对我来说似乎太错了。他说这是因为填充会拉伸元素的宽度，对此我的反应是框大小：边框框

我必须照他说的去做，但有时我们会谈论这个问题，他似乎确实接受了我的建议，但我认为我说的不对。实际上更好吗？如果不是，为什么

这个问题可能会因为有点讨论而结束，但这让我发疯了，我不知道还能转到哪里去

提前谢谢

这样解释他： 边距位于块元素的外部，而填充位于内部

---

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

这是任何但更好的方法。当CSS属性（padding）几乎永远存在时，尝试使用其他方法将填充添加到框中是没有意义的

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

（见鬼，给元素填充就是其中之一！），但这些方法的设计目的并不是为了防止边距塌陷，而是为了防止产生副作用，而且也没有简单的塌陷“关闭开关”

那些不了解崩溃的本质和目的的作者会发现自己在处理这个问题上遇到了很多麻烦。如果你打算用边距来模拟填充，你可能会遇到困难。这不值得

给定的标记是一个典型的例子，说明边距崩溃可能会意外发生并引起麻烦：如果

.caption

元素上没有其他样式（如边框或填充），则

.captionContainer

的边距将与

.caption

的边距结合，从而导致类似的情况发生。同样，这是一个很好的反例，当尝试使用边距模拟填充时，结果适得其反

与边距塌陷造成的潜在问题相比，我真诚地发现您建议使用

框大小：边框框

是反对使用边距模拟填充的一个很好的例子，同时保留您所需的确切宽度，因为它旨在解决该问题。浏览器支持也相当不错（IE8+），因此，除非您是为真正的旧浏览器设计的，否则应该可以使用它

---

使用保证金做

填充

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

不知何故，我不认为给他看一张盒子模型的图表对我的案例有多大帮助。我在找更深一点的。谢谢！这是一个很好的观点。下次我们讨论的时候我会提出来的。我从未经历过这种情况，因为我通常不会如此不谨慎地使用保证金。为了这个目的做额外的div确实让我很痛苦。我想这只是因为他有那么多讨厌填充的经验，因为没有边框的宽度是多么令人讨厌。但我是一名新开发人员，HTML5是我的第一语言，所以我对它非常熟悉。我通常以*{box size:border box}开始每个样式表。