我们假设我们有以下代码:
<div style="margin-bottom:100px;">test</div> <div style="margin-top:100px;">test</div>
我注意到有时它会在元素之间产生100px的边距,有时它会产生200px(当我们使用某些我不熟悉的设置时).我在规范中找不到任何相关信息.这取决于什么?
如果我们在空白文档中有h1和p,则h1的边距将与p的边距组合.他们不会加起来.将使用较大者.
解决方法
发生这种情况是因为您的边距被允许崩溃.某些边距可能重叠(主要是块元素),并形成由计算元素样式规则中定义的两个值中较大者定义的组合边距 – 这就是这里发生的事情.来自
CSS Box Model文档的
This section详细解释了它.
编辑:作为一个兴趣点,你可以通过几种方式解决这个问题(即打破可折叠的边距)而不会破坏事物(很多?)
>使元素宽度:100%; display:内联块
>高度:0;宽度:0;溢出:在元素之间隐藏块并在其中放置点或其他内容.