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

Question

我知道这个问题有 been asked之前，但我不明白如何使用 margin:0 元素他们的边距“崩溃”了——他们的边距向我“扩展”了(到 15px 两个元素之间的垂直间隙 - <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在这里。

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/