CSS边距加起来还是合并?

前端之家收集整理的这篇文章主要介绍了CSS边距加起来还是合并?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们假设我们有以下代码
<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;溢出:在元素之间隐藏块并在其中放置点或其他内容.

我分叉阿什利的fiddle进行演示.可能还有其他方法,但如果需要,这些方法可以快速绕过可折叠边距.

原文链接:https://www.f2er.com/css/215952.html

猜你在找的CSS相关文章