Question

我只是编写简单的代码，但在我的结果中似乎有一个无法解释的空白...... 我似乎无法失去它！

要清楚：我指的是紫色标题和白色导航属性之间的“线”。

我尝试删除代码中的标签和空格，但它没有帮助。

HTML：

<body>

<div id="wrapper">

    <header>
        <img class="logo" src="images/logo.png">
    </header>

    <nav id="mainMenu">
        <ul>
            <li>Nieuwsoverzicht</li>
            <li>Trending</li>
            <li>Lokaal nieuws</li>
        </ul>
    </nav>
</div>
</body>

CSS：

body{
    background-color:#ebebeb;
    margin:0;
    padding:0;
}

#wrapper{
    width:100%; 

    padding:0;
    margin:0;
}

header{
    background-color:#835497;

    height:70px;
    width:100%;

    margin:0;
    padding:0;
}

.logo{
    height:80%;

    display:block;
    margin: 0 auto 0 auto;
}

nav{
    background-color:#ffffff;

    height:45px;
    width:100%;

    margin:0;
    padding:0;
}

nav#mainMenu ul li{
    font-family:'source_sans_proregular';
    font-size:1.2em;
    color:#c2c2c2;

    display:inline-block;
    text-align:center;
    margin:0;
    padding:0;

}

这是我忽略的东西，还是我只是犯了一个拼写错误？

Answer 1

也许您所谈论的空白是由于ul？

jsfiddle

尝试将边距设置为零：

ul {
    margin: 0;
}

Answer 2

您的列表ul有默认保证金。将其删除：

#mainMenu ul{
    margin-top:0;
}

<强> jsFiddle example

Answer 3

您看到的空白是ul元素与header元素之间折叠边距的结果。

如果您将overflow: auto添加到nav元素，则它将包含子元素的任何边距，在本例中为ul元素。

您可以通过明确地将上边距值设置为零来控制ul的上边距覆盖默认值。

Answer 4

您的LI中有0个边距和填充，但UL中没有。因此，UL的默认填充和边距仍然存在。要修复，请添加此样式：

 nav#mainMenu ul{
   margin:0;
   padding:0;
 }

无法解释的空白？

4 个答案: