CSS边距重叠问题

前端之家收集整理的这篇文章主要介绍了CSS边距重叠问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
请看我的代码,我不明白为什么这些div的边距是重叠的。
<div class="alignright">

    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->

    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->

    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->

</div>

CSS:

.alignright {float: right}

#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}

#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}

#header .search {margin: 10px 0 0;}

解决方法

我认为这是一个折叠的边缘。
仅考虑第一元件的底部和第二元件的顶部之间的最大边缘。

在两个段落之间没有太多空格是很正常的。

你不能避免使用两个相邻的元素,所以你必须放大或减小较大的边距。

编辑:cf. W3C

Two margins are adjoining if and only if:

  • both belong to in-flow block-level Boxes that participate in the same block formatting context
  • no line Boxes,no clearance,no padding and no border separate them
  • both belong to vertically-adjacent Box edges

所以没有崩溃与浮动,使元素出流。

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

猜你在找的CSS相关文章