如何去除背景图片和导航栏之间的白色间隙

Question

我绝不是 HTML 或 CSS 方面的专家。我是相当新的，并且没有什么经验。我遇到过问题，但不确定如何解决。正如您从 JSFiddle（下面的链接）中看到的那样，图像和导航栏之间有一个白色的缝隙。该图像是在 CSS 中创建的背景图像。我想消除间隙，使图像与导航栏齐平。

我已经尝试更改#headerimage div 以及#nav div 的边距和填充值。我知道如果我将 margin-top 设置为负值，它可以解决问题，但这是一个非常笨拙的解决方案，因为如果我增加字体大小或类似的东西，我将不得不不断更改该值。我也在 Whosebug 上搜索了类似的问题，但是 none 解决了我的问题。

我也意识到，就我的编码方式而言，我可能会做很多不同的事情，我又是新手。下面的代码是HTML代码，下一段是CSS代码。抱歉，如果我没有解释清楚，如果您需要更多信息，我会尽力进一步详细说明这个问题。非常感谢大家花时间看我的问题。祝一切顺利。如果您发现任何其他问题，无论是可能的错误，还是不是一个好的解决方案，我很乐意在这里讨论。

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="about.css">
        <title>Sean Anderson</title>

    </head>
    <body>

        <div id="container">

            <div id="nav">

                <ul>

                    <li><a href="about.html">About</a></li>
                    <li><a href="achievements.html">Achievements</a></li>
                    <li><a href="school.html">Academics</a></li>
                    <li><a href="contact.html">Contact</a></li>

                </ul>

            </div>
            <div id="headerimage">

                <h1>SEAN ANDERSON</h1>


            </div>
            <div id="whoami">

                <h2>WHO AM I?</h2>
                <ul>

                    <li>I am a student at SFS High School</li>
                    <li>I am an aspiring programmer</li>
                    <li>Comics, books, programming, casual gaming</li>
                    <li>4.0 GPA</li>
                    <li>Star Wars is my life</li>

                </ul>

                <img src="testbackground.jpg">

            </div>
            <div id="skills">

                <h2>SKILLS</h2>

                <ul>

                    <li>Familiar with Java, HTML, and CSS</li>
                    <li>Skilled with Microsoft Office Suite 2013</li>
                    <li>Skilled in math, science, and English</li>
                    <li>Awesome</li>

                </ul>

            </div>
            <div id="footer">

                <p>Copyright &copy; 2015 Sean Anderson</p>

            </div>

        </div>

    </body>

</html>

body {

    font-family: Helvetica, sans-serif;
    width: 100%;
    background-color: white;
    margin-left: 0px;
    margin-top: 0px;

}


#container {

    width: 100%;
    background-color: white;
    margin-top: 0px;

}

#nav {

    background-color: black;
    margin-bottom: 0px;

}

#nav ul {

    list-style-type: none;
    padding: 30px 0px 30px 0px;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    min-width: 1920px;


}

#nav li {

    display: inline;
    text-align: center;

}

#nav a {

    text-decoration: none;
    text-align: center;
    color: white;
    font-size: 30px;
    padding: 30px 50px 30px 50px;

}

#nav a:hover {

    background-color: white;
    color: black;

}

#headerimage {

    background-image: url("testbackground.jpg");
    background-repeat: repeat;
    height: 1000px;
    width: 100%;
    margin-top: 0px auto;
    display: block;
    clear: both;

}

#headerimage h1 {

    text-align: center;
    vertical-align: middle;
    padding-top: 150px;

}

这是 JSFiddle：http://jsfiddle.net/Seanathon98/3nw5wj1d/ （图像占据了我显示器的整个宽度，不知道为什么没有那样显示，因为我确实使用了 width: 100%.

Answer 1

将 H1 元素的边距和填充设置为 0。

h1 { 
    margin: 0;
    padding: 0;
}

您可以通过将 h1 元素的位置设置为绝对位置并使用填充和边距正确定位来使它居中；

#headerimage h1 {
  position: absolute;
  margin: -20px 0 0 0;
  padding: 50% 0 0 0;
}

如何去除背景图片和导航栏之间的白色间隙

How to remove the white gap between the background image and the navigation bar

html

css

image

nav

removing-whitespace