CSS边距重叠问题 [英] CSS Margins Overlap Problem

问题描述

请参阅我的代码，我不明白为什么这些div的边距重叠。

 < div class =alignright> 
 
< div class =social> 
< a href =＃class =twit>< / a> 
< a href =＃class =fb>< / a> 
< / div><！ -  social  - > 
 
< div class =contact> 
联系：< span> [phone]< / span> 
< / div><！ -  contact  - > 
 
< div class =search> 
< form method =postaction => 
< input type =textvalue =name =sgtbfieldid =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;} 
  

---

解决方案

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

这是很正常的没有两个段落之间的空格太大例如

你不能避免使用两个相邻的元素，所以你必须放大或缩小较大的边距。 / p>

编辑：cf. W3C

当且仅当以下情况时，两个边距相邻：

• 都属于参与相同的块格式化上下文


• 没有线框，没有间距，没有填充和边框分开


• li>
  

所以没有折叠 float 将元素从流中移除。

Please see my code, I don't understand why the margins of these divs are overlapping.

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

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

---

解决方案

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.

这篇关于CSS边距重叠问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！