我不明白为什么这些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为单位的坍塌,这会将元素从流动中移除.

Css相关问答推荐

CSS动画与不正确的时间比率

在COLOR-MIX()中使用var()似乎会使其对于不支持COLOR-MIX()的浏览器具有可读性,从而阻止了回退的工作

Vue3日期 Select 器:禁用向左和向右箭头

如何将CSS动画从第一列移动到第二列?

Prettier/VS Code 在 CSS 中的 !important 之前添加一个空格,导致它在 WordPress 中崩溃

做一个像CodeSandbox的console那样的可拖拽的split panel

每当键盘在react native 中打开时,如何使用 KeyboardAvoidingView 删除图像?

如何使用 TailwindCSS 水平设置输入和按钮

在活动状态下更改按钮的外观

如何使用 TailwindCSS 禁用环形阴影?

用 svelte 设计 body 元素

是否可以对 CSS 网格中重复和可包装的列使用固定的最小和最大宽度?

CSS3 的 :root 伪类和 html 有什么区别?

在固定高度的输入字段中垂直对齐文本而不显示:表格或填充?

如何在 CSS 中覆盖图像?

什么是 DOM 回流?

div内的CSS中心内容

数据协议 URL 大小限制

在 CSS 中结合border-top、border-right、border-left、border-bottom

仅针对使用的类优化 Font Awesome