Question

我绝不是HTML或CSS方面的专家。我很新，而且经验不多。我遇到并发出问题，我不知道如何解决它。正如您从JSFiddle（下面链接）中看到的那样，图像和导航栏之间存在白色斑点。图像是在CSS中创建的背景图像。我想删除间隙，以便图像与导航栏齐平。

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

我也意识到，就我如何编写某些东西而言，我可能已经做了很多不同的事情，我又是新的。以下代码是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/ （图像占据了我的显示器的整个宽度，不知道为什么不会出现这种情况，因为我使用宽度：100％。

Answer 1

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

h1 { 
    margin: 0;
    padding: 0;
}

您可以通过将h1元素的位置设置为绝对值来居中，并使用padding＆amp;保证金正确定位;

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

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

1 个答案: