Question

我是新来的，我也是从零开始创建我的第一个网站。

如image所示，顶部的导航栏上方和下方都有空格，我不想要。我已经尝试删除/添加填充到.nav ul但它似乎没有工作。

我的HTML / CSS的哪一部分对此负责，我该如何解决？谢谢！

＆＃13;

html, body {
    margin: 0;
}

div {
    display: block;
}

.header {
    background-color: #333333;
}

.nav {
    padding:  0;
    margin: 0 auto;
}

.nav ul {
    padding: 20;
}

.nav ul li {
    color: white;
    display: inline-block;
    padding: 20px 30px 20px 10px ;
    font-family: serif;
    font-weight: 200;
}

.second_section .container {
    background-image: url(http://1.bp.blogspot.com/-    I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
    height: 900px;
}

.copy {
    position: absolute;
    margin: 100px 50px 500px 500px;
    color: white;
    font-family: garamond;
}

＆＃13;

<div class="header">
    <div class="nav">
        <ul>
            <li>ABOUT</li>
            <li>WORK</li>
            <li>TEAM</li>
            <li>CONTACT</li>
    </div>
</div>

<div class="second_section">
    <div class="container">
        <div class="copy">
            <h1>ACTUATE CONTENT</h1>
            <h3>Expert content for every business</h3>
        </div>
    </div>
</div>

＆＃13;

Answer 1

解决方案：

这应该这样做：

.nav ul {
    margin: 0;
}

另见this Fiddle演示。

注意：

您为padding: 20;设置的.nav ul不会产生任何影响，因为填充需要一个单位才能跟随您的值。您可能需要padding: 20px;或padding: 1.25em;之类的内容。
font-weight: 20;也不会有任何影响。 font-weight的有效值为normal，bold，bolder，lighter，100，200，300，{ {1}}，400，500，600，700和800。

Answer 2

给予以下css将删除浏览器在css之上的所有默认边距和填充。

* {
    margin: 0;
    padding: 0;
}

<强> Working Fiddle

导航周围不需要的空间

2 个答案:

解决方案：

注意：