让我们首先说我理解盒子模型。在我作为开发人员的短暂时间里，我一直试图非常严格地遵循语义 html 并使用响应式设计实践。我最近在一家新公司找到了一份初级开发人员的工作，而我的先生则坚决反对填充。就像他无论如何都不希望它被使用一样。他希望我在所有内容上使用设置的高度和宽度，如果我需要模拟填充，我必须使用边距添加一个子 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 进行了回应。
我必须按照他说的去做，但有时我们会谈论这一点，他似乎确实有点接受我的建议，但我认为我说的不对。它实际上更好吗？如果不是，为什么？
这个问题可能会因为有点讨论而结束，但这让我发疯，我不知道还能转向哪里。
提前致谢！
什么都可以but更好的。当 CSS 属性专门用于此目的时，尝试使用其他方法向框添加填充是没有意义的，padding，几乎永远存在。
无论如何，我能想到的一个反例是，相邻的垂直边距可以collapse http://www.w3.org/TR/CSS21/box.html#collapsing-margins.
有几种方法可以取消保证金崩溃 https://stackoverflow.com/questions/12000166/why-no-rule-for-un-collapsing-margins/12000292#12000292（哎呀，给元素填充就是其中之一！），但这些方法不是designed为了防止利润崩溃，就像他们所做的那样副作用，并且没有简单的折叠“关闭开关”。
不了解崩溃的本质和目的的作者会发现自己在处理它时遇到了很大的麻烦。如果您打算使用边距来模拟填充，您可能会遇到困难。这不值得。
您给定的标记是边距折叠可能意外发生并导致头痛的一个主要示例：如果您的标记上没有其他样式.caption元素（如边框或填充）、边距.captionContainer将与那些结合.caption，导致类似的结果this https://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work正在发生。同样，这是一个很好的反例，说明尝试使用边距模拟填充最终会适得其反。
与边距崩溃引起的潜在问题相比，我真诚地发现您使用的建议box-sizing: border-box一个很好的例子，反对使用边距来模拟填充，同时保留您需要的确切宽度，因为它是designed来解决这个问题。浏览器支持也相当不错（IE8+），所以除非你是为非常旧的浏览器设计，否则使用它应该没问题。
使用利润来做事情还有其他几个潜在的陷阱padding显然是要做的，但利润崩溃是您将面临的最大问题之一。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
