我们假设我们有以下代码:
<div style="margin-bottom:100px;">test</div>
<div style="margin-top:100px;">test</div>
我注意到有时它会在元素之间创建100px的边距,有时它会产生200px(当我们使用某些我不熟悉的设置时).我在规范中找不到任何相关信息.这取决于什么？
如果我们有h1,并p在一个空白文档,然后的利润率h1将与的保证金组合p.他们不会加起来.将使用较大者.
m.b*_*ley 15
这种情况正在发生,因为您的利润率可能会崩溃.某些边距可能重叠(主要是块元素),并形成由计算元素样式规则中定义的两个值中较大者定义的组合边距 - 这就是这里发生的事情.本节从CSS盒模型文档解释得很详细.
编辑:作为一个兴趣点,你可以通过几种方式解决这个问题(即打破可折叠的边距)而不会破坏事物(很多？)
width: 100%; display: inline-blockheight: 0; width: 0; overflow: hidden在元素之间放置一个块并在其中放置一个点或其他内容.我分叉阿什利的小提琴演示.可能还有其他方法,但如果需要,这些方法可以快速绕过可折叠边距.