为什么我的div边距重叠,如何解决?


81

我不明白为什么这些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>

图片


2
您可能会发现这篇文章的格式上下文有趣:tjkdesign.com/articles/...
jensgram

1
您似乎缺少在此使用的一些规则。.alignright中的所有元素是否也都浮动了?
乔尔·格洛维耶

Answers:


80

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

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

您无法通过两个相邻元素来避免这种情况,因此必须增大或减小较大的边距。

编辑:比照。W3C

当且仅当以下情况时,两个边距相邻:

  • 都属于流内块级框,它们参与相同的块格式上下文
  • 没有线框,没有间隙,没有填充和没有边框将它们分开
  • 都属于垂直相邻的盒子边缘

因此,不会发生折叠,float从而使元素脱离流程。


只需将保证金降低到您想要的水平即可。
Kissaki 2010年

编辑,只是放大或缩小较大的边距或使用填充
MatTheCat 2010年

8
刚刚发现,如果您浮动元素,则将应用两个元素的边距。
阿提夫

10
我会谨慎使用float它,因为它可能会产生一些令人讨厌的副作用。我很谨慎地使用float它。
2014年

如果给定一个小时的高度,它是否会成为流块水平框?试试看
Manuel Hernandez

49

与填充(填充特定宽度)相反,边距是“以最小距离执行此操作”。

不会把所有元素都拉到那个距离。

如您所见,“ in in touch”块的底部边距被标记到输入框。这是活跃的保证金。另一个边距,即输入的最高边距,则无效,因为它较小,并且没有到达实际上会推回元素的块元素。这两个边距重叠且互不影响。


1

如果您不能使用填充,并且确实需要保证边距不重叠,这是一个技巧:

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

请启动此代码段进行演示:


0

注意display: flex父元素。

.flex {
  display: flex;
  flex-direction: column;
}

.block {
  display: block;
}


/* css for example only */
div {
  padding: 1em;
  background: #eee;
}
p {
  font-size: 20px;
  margin: 1em 0;
  background: pink;
  padding: 5px;
}
p:first-child {
  margin-top: 0;
}
<h1>display: flex</h1>
<div class="flex">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<h1>display: block</h1>
<div class="block">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.