为什么我的div边距重叠，我该如何解决? [英] Why are my div margins overlapping and how can I fix it?

问题描述

我不明白为什么这些div的边距重叠.

 .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;} 

 <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>[phone]</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div> 

解决方案

我认为这是一个虚假的利润. 仅考虑第一个元素的底部和第二个元素的顶部之间的最大边距.

例如在两个段落之间没有太多的间隔是很正常的.

您无法通过两个相邻元素来避免这种情况，因此必须放大或缩小较大的边距.

cf. W3C

当且仅当:

• 两者都属于流内块级框，它们参与相同的块格式上下文
• 没有线框，没有间隙，没有填充，也没有边框
• 都属于垂直相邻的盒子边缘

因此，不会与float崩溃，从而使元素脱离流程.

I don't understand why the margins of these divs are overlapping.

.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;}

<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>[phone]</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div>

解决方案

I think it's a collapsed margin. Only the largest margin between the bottom of the first element and the top of the second is taken into account.

It is quite normal to don't have too much space between two paragraphs eg.

You cannot avoid that with two adjacent elements so you have to enlarge or reduce the larger margin.

EDIT: 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

So there is no collapsing with float which takes the element out of the flow.

这篇关于为什么我的div边距重叠，我该如何解决?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！