风格：

Question

这是HTML有人可以帮帮我吗？我无法删除导航上方的小边距。

我已经尝试过填充：0px和margin-top：0px

            <body>

            <div id="wrap">
                <div class="top_portion">
                <img src="img/icbox.png">
                </div>

            <div id="welcome">
                <h1>Welcome to my blog about the married life</h1>
                <h3>Ain't much to see here for now!</h3>
            </div>

            <div id="navigation">
                <ul>
                    <li><a href="#Home">Home</li>
                    <li><a href="#About">About</li>
                    <li><a href="#Pictures">Pictures</li>
                </ul>
            </div>

            </div>
            </body>
            </html>

这就是CSS很抱歉，自从我回到这个网站已经有一段时间了

body    {
    background-color:white;
    font-family: 'Josefin Slab', serif;
}

.top_portion    {
    width:800px;
    height:200px;
    background-color:#e2e2e2;
    margin:auto;
    text-align:center;
    border-top:5px;
    border-bottom:5px;
    border-left:0px;
    border-right:0px;
    border-style:solid;
    border-color:#30474b;
}

.top_portion    img     {
    padding-top:35px;
}

#welcome    h1  {
    margin-top:0px;
    text-align:center;
    padding:0px;
    margin-bottom:0px;
}

#welcome    h3  {
    margin-top:0px;
    text-align:center;
}

#welcome    {
    font-family:sans-serif;
    margin:auto;
    background-color:#e2e2e2;
    width:800px;
}

#navigation {
    text-align:center;
}

#navigation li  {
    list-style-type:none;
    display:inline;
}

ul  {
    margin-top:0;
}

ul a {
    padding-right:20px;
    text-decoration:none;
}

ul a:hover  {
    text-decoration:underline;
    }

Answer 1

试试这个：

我认为这是因为标题的默认行为。

风格：

    html, body 
    {
            padding: 0;
            margin: 0;
    }
    #welcome h3 {
        margin-top:0px;
        margin-bottom:0px;
        text-align: center;
    }
    /*Or you can try
    #welcome h3 {
        margin:0;
        text-align: center;
    }*/

以下是 Demo

Answer 2

h3
Margin:0;可以解决问题..你早些时候在margin:0;的哪个位置？

h3 {margin:0;}

在您的情况下，您应将#welcome h3更改为：

#welcome h3 {
    margin: 0;
}

<强> DEMO

Answer 3

由于您要从导航栏的顶部删除边距，您可以尝试这样做：

#navigation {
margin-top: 0px;
border-top: 0px;
}

因为，您在导航中包含列表，它可能会占用您的一些空间。试着把它包括在内：

#navigation li {
margin-top: 0px;
}

可能你也可以尝试：

#welcome h3 {
margin: 0px;
margin-bottom: 0px;
}

H3，因为这只会保留导航栏上方的一行

Answer 4

我在您的查询中更改了这些内容

    #navigation {
        text-align:center;
        margin-top:0px;
    }

#welcome h1 {
    margin-top:0px;
    text-align:center;
    padding:0px;
    margin-bottom:0px;

}
#welcome h3 {
    margin-top:0px;
    text-align:center;
     margin-bottom:0px;
}

无法删除导航上方的边距空间

4 个答案:

风格：

workingFiddle