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

Question

我之前知道这个问题有been asked，但是我不明白margin:0的元素如何让他们的边缘“崩溃” - 他们的边缘“延伸”给我（两个元素之间的15px垂直间距 - <header>＆amp; <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此处。

Answer 1

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

默认情况下，浏览器会将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/

Answer 2

当子元素被赋予float:left或float:right时，父元素会崩溃。你需要在父元素中清除float，在这种情况下，父元素为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;
}

您可以相应地调整保证金（如果需要）。