css – 保证金不会压低另一个保证金

前端之家收集整理的这篇文章主要介绍了css – 保证金不会压低另一个保证金前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一系列这样的元素:
<h1>...</h1>
<p>.......</p>
<h1>...</h1>
<p>.......</p>
<!-- etc. -->

我在h1上有5px的上边距,在p上有10px的下边距.但由此产生的利润仅为10px.如果我将底部保证金增加到50px并将最高保证金增加到40px,则总保证金仅为50px.

总保证金始终是最大的保证金.为什么?我该如何解决

解决方法

您看到的行为称为保证金崩溃,这是预期的行为.基本上,当两个块级元素的边距接触时,它们会崩溃,并且只会出现最大的一个.

Margins collapse between adjacent
elements. In simple terms,this means
that for adjacent vertical block-level
elements in the normal document flow,
only the margin of the element with
the largest margin value will be
honored,while the margin of the
element with the smaller margin value
will be collapsed to zero.

http://reference.sitepoint.com/css/collapsingmargins

没有人可以解决这个问题 – 您可以尝试使用填充,或者只是考虑到这一点来增加边距.

猜你在找的CSS相关文章