Question

好吧，我无法通过在网站上搜索找到答案，但我对HTML / CSS还是比较新的，我想知道如何去除导航栏周围的白色间距我和＃39我得到了。

HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>Reisbureau</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans'  rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="header">
        <div class="headerContent">
            <div class="nav">
                <ul>
                    <li><a href="#" id="reisbureau">Reisbureau</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Over Ons</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

CSS

.nav ul li {
    list-style: none;
}
.nav ul li a {
    text-decoration: none;
    float: right;
    padding: 8px 50px;
    color: dimgrey;
}
.nav ul li a:hover {
    color: black;
}
.nav {   
    font-family: Open Sans;
    font-size: 10;
    text-align: center;
    height: 40px;
    background-color:aliceblue;
}

#reisbureau {
    float: left;
}

的jsfiddle http://jsfiddle.net/398aLrpy/

编辑注释 style.css的内容不包括在内，因此我们实际上无法像他那样看到导航栏。仅凭这个原因进行投票。

我真的很无能为力，谢谢你。

Answer 1

从margin元素中移除默认body，从margin-top元素移除ul：

body, ul{margin:0}

JSFiddle

Answer 2

默认情况下，浏览器会将padding和/或margin设置为<body>和/或<html>

你可以这样做：

<强> CSS

body, html{
    margin:0;
    padding:0;
}

<强> DEMO HERE

导航栏周围的白色间距

2 个答案: