我不明白为什么这些 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>+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>
我认为这是一个塌边。
仅考虑第一个元素的底部和第二个元素的顶部之间的最大边距。
两个段落之间没有太多空间是很正常的,例如。
您无法避免两个相邻元素的这种情况,因此您必须放大或缩小较大的边距。
编辑:参见。W3C
两个边距相邻当且仅当:
- 两者都属于参与同一块格式化上下文的流内块级框
- 没有行框,没有间隙,没有填充,没有边框将它们分开
- 两者都属于垂直相邻的盒子边缘
所以没有崩溃float
它将元素从流中取出。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)