边距为 0 的元素之间的垂直间隙答案

【问题标题】：vertical gap between elements with margin 0边距为 0 的元素之间的垂直间隙
【发布时间】：2016-06-16 09:06:34
【问题描述】：

我知道这个问题之前有 been asked，但我不明白带有 margin:0 的元素如何让它们的边距“折叠” - 他们的边距“延伸”到我身上（到 @987654326 @ 两个元素之间的垂直间隙 - <header> & <nav>。

这是我正在使用的 HTML 代码：

<div id="container">
    <header>
      <div class="logo">...</div>
    </header>
    <nav>
      ...
    </nav>
</div>

和 CSS 样式：

#container {
    width: 1178px;
    margin: 0 auto;
    background-color: #FFF;
}
header {
    height: 102px;
    background-color: #000;
    background-image: url(images/header-bg.jpg);
    margin: 0;
}
nav {
    height: 51px;
    background-image: url(images/navigation-bg.jpg);
    background-repeat: repeat-x;
    margin: 0;
}
.logo {
    width: 268px;
    height: 69px;
    padding: 22px 0 0 31px;
    margin: 0;
    float: left;
}

jsfiddle 在这里。

【问题讨论】：

它们之间有 15px 的差距？我无法从您当前的代码中获取信息。当您对徽标应用填充时，您可能会有 22 像素的间隙。
你能做 jsfiddle 或 plnkr 吗？
您想了解边距折叠规则吗？那么this会更好地帮助你。
感谢您的帮助。 @Martin：jsfiddle 在这里。
ul 有一个margin-top 属性，它将nav 向下推。删除它以消除间隙。

标签： html css

【解决方案1】：

您必须为<ul> 元素设置margin: 0;。

默认情况下，浏览器将margin-top 和margin-bottom 设置为15px。

#menu-primary-menu {
    list-style-type: none;
    margin: 0;
}

您可以在下图中看到<ul> 元素具有margin-top: 15px，即使您没有自己设置。

顺便说一句，如果您想保留 margin-bottom: 15px，请将其设置在 <nav> 元素上，而不是 <ul>，因为它在 <nav> 内部。 https://jsfiddle.net/cq0LwL8f/1/

【讨论】：

谢谢@Martin。你是说如果我只设置margin-bottom: 15px; margin-top: 也设置为15px？
不，margin-top 始终由浏览器默认设置，即使您没有以任何方式设置它的样式。
对。不知道那个。异常。谢谢。

【解决方案2】：

当给定子元素float:left 或float:right 时，父元素会折叠。您需要清除父元素中的浮动，在您的情况下，父元素是UL，子元素是LI。

参考下面的css，或许可以解决：

假设这个 HTML 结构：

<ul class="clear">
    <li class="floated">...</li>
    <li class="floated">...</li>
    <li class="floated">...</li>
</ul>

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

您看到的15px 差距也是由于给定的margin-bottom:15px。

#menu-primary-menu {
    list-style-type: none;
    margin-bottom: 15px;
}

您可以相应地调整边距（如果需要）。

【讨论】：

感谢@Nukul Ghosh！