Question

我的网页在我的内容之后具有所有这些额外的白色间距。如果你将我的代码粘贴到你的IDE中，看起来会很棒！我尝试了一些事情，比如在页面的整个内容周围做一个div，并在底部设置一些填充和边距，但我无法得到它！

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/about.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <title>Halong Bay</title>
</head>
<body>

    <nav class="navbar">
            <ul>
                <li><a href="index-bay.html">Home</a></li>      
                <li><a href="about.html">About</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="map.html">Map</a></li>
                <li><a href="tables.html">Table</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    <section class="intro">
        <div class="inner">
            <div class="content">
                <h1>About Halong Bay</h1>
                <a class="btn" href="#link"> get started </a>
                <a class="btn" href="index-bay.html"> Back to Home </a>
            </div>
        </div>
    </section>
    <article>
    <h1>Halong Bay</h1>
    <p id="link"> 
        Ha Long Bay, is in Northeast Vietnam. It is known for its beatiful emerald waters and thousands of towering green limestone islands. It is topped by rainforests, junk boat tours, and sea kayak expeditions. The boat tours takes it visitors past islands named for their shapes, including Stone Dog, and Teapot island. The region is popular for scuba diving, rock climbing, and hiking. It is a really beatiful place to visit and has some most fasinating species of animals that live in this bay.
    </p>
    </article>
    <div id="history">
    <h1>History of Ha Long Bay</h1>
    <p>
        For hundreds of years Halong bay has been an important culture and history of Vietnam. Halong bay also known as Vinh Ha Long, means "Bay of the Descending Dragon". There are approximately 1,969 small islands in this bay. All compromised of differnt sizes and form. These islands have intrigues and amazed locals for hundreds of years. There are over 200 species of fish and over 250 species of mulluks in the water.
    </p>
    </div>


</body>
</html>

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;


}

.intro {
    height: 100%;
    width: 100%;
    margin: auto;
    background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
    background-size: cover;
    display: table;
}

.intro .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.content h1 {
    font-family: 'Raleway';
    color: #f9f3f4;
    text-shadow: 0px 0px 300px #000;
    font-size: 500%;
}

.btn {
    border-radius: 9px;
    font-family: 'Raleway';
    color: white;
    font-size: 135%;
    padding: 10px 20px;
    border: solid #036AB1;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 20px;
    font-weight: bold;
}

.btn:hover {
    color: #fff;
    border: solid #fff 3px;
}

p {
    font-size: 160%;
    line-height: 200%;
    margin: 3%;
    font-family: 'Raleway';
    padding: 200px;
}


nav ul li {
    position: relative;
    color: red;
    font-size: 24px;
    display: inline-block;
    text-align: right;
    margin-right: 40px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Raleway';
    font-weight: 900;



}

nav ul li a {
    color: black;
    text-decoration: none;


}

nav ul li a:hover {
    color: blue;

}

.navbar {
    color: black;
    text-align: center;


}

a.btn {
    font-weight: 950;
}

#link {
    position: relative;
    bottom: 100px;

}

p:first-letter {
    font-size: 200%;
}





article {
    padding: 50px;
}

#top1 {

    font-size: 30px;
    text-align: center;

}

article h1 {
    font-size: 40px;
    text-align: center;
}



#history h1 {
    font-size: 50px;
    text-align: center;
    position: relative;
    bottom: 300px;
}


#history p {
    position: relative;
    bottom: 500px;
}

Answer 1

我弄清楚为什么你有那么大的空白空间，这两件事就是问题所在：

使用bottom w / padding和相对定位。
使用200px填充。

你真的不应该在元素上使用那么多的填充。

这是什么，我猜，它应该是这样的：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.intro {
  height: 100%;
  width: 100%;
  margin: auto;
  background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
  background-size: cover;
  display: table;
}

.intro .inner {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  max-width: none;
}

.content {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.content h1 {
  font-family: 'Raleway';
  color: #f9f3f4;
  text-shadow: 0px 0px 300px #000;
  font-size: 500%;
}

.btn {
  border-radius: 9px;
  font-family: 'Raleway';
  color: white;
  font-size: 135%;
  padding: 10px 20px;
  border: solid #036AB1;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: 20px;
  font-weight: bold;
}

.btn:hover {
  color: #fff;
  border: solid #fff 3px;
}

p {
  font-size: 160%;
  line-height: 200%;
  margin: 3%;
  font-family: 'Raleway';
  padding: 20px 200px;
}

nav ul li {
  position: relative;
  color: red;
  font-size: 24px;
  display: inline-block;
  text-align: right;
  margin-right: 40px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Raleway';
  font-weight: 900;
}

nav ul li a {
  color: black;
  text-decoration: none;
}

nav ul li a:hover {
  color: blue;
}

.navbar {
  color: black;
  text-align: center;
}

a.btn {
  font-weight: 950;
}

#link {
  position: relative;
}

p:first-letter {
  font-size: 200%;
}

article {
  padding: 50px;
}

#top1 {
  font-size: 30px;
  text-align: center;
}

article h1 {
  font-size: 40px;
  text-align: center;
}

#history h1 {
  font-size: 50px;
  text-align: center;
  position: relative;
}

#history p {
  position: relative;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/about.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <title>Halong Bay</title>
</head>

<body>

  <nav class="navbar">
    <ul>
      <li><a href="index-bay.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="map.html">Map</a></li>
      <li><a href="tables.html">Table</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <section class="intro">
    <div class="inner">
      <div class="content">
        <h1>About Halong Bay</h1>
        <a class="btn" href="#link"> get started </a>
        <a class="btn" href="index-bay.html"> Back to Home </a>
      </div>
    </div>
  </section>
  <article>
    <h1>Halong Bay</h1>
    <p id="link">
      Ha Long Bay, is in Northeast Vietnam. It is known for its beatiful emerald waters and thousands of towering green limestone islands. It is topped by rainforests, junk boat tours, and sea kayak expeditions. The boat tours takes it visitors past islands
      named for their shapes, including Stone Dog, and Teapot island. The region is popular for scuba diving, rock climbing, and hiking. It is a really beatiful place to visit and has some most fasinating species of animals that live in this bay.
    </p>
  </article>
  <div id="history">
    <h1>History of Ha Long Bay</h1>
    <p>
      For hundreds of years Halong bay has been an important culture and history of Vietnam. Halong bay also known as Vinh Ha Long, means "Bay of the Descending Dragon". There are approximately 1,969 small islands in this bay. All compromised of differnt sizes
      and form. These islands have intrigues and amazed locals for hundreds of years. There are over 200 species of fish and over 250 species of mulluks in the water.
    </p>
  </div>



</body>

</html>

Answer 2

当我在系统中检查了你的代码时，我注意到问题出现了，因为你的CSS中有填充和边距设置。我对你的CSS做了一些改动。尝试一下，仍然有任何问题让我知道。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;


}

.intro {
    height: 100%;
    width: 100%;
    margin: auto;
    background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
    background-size: cover;
    display: table;
}

.intro .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.content h1 {
    font-family: 'Raleway';
    color: #f9f3f4;
    text-shadow: 0px 0px 300px #000;
    font-size: 500%;
}

.btn {
    border-radius: 9px;
    font-family: 'Raleway';
    color: white;
    font-size: 135%;
    padding: 10px 20px;
    border: solid #036AB1;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 20px;
    font-weight: bold;
}

.btn:hover {
    color: #fff;
    border: solid #fff 3px;
}

p {
    font-size: 160%;
    line-height: 200%;
    margin: 3%;
    font-family: 'Raleway';
    padding: 200px;
}


nav ul li {
    position: relative;
    color: red;
    font-size: 24px;
    display: inline-block;
    text-align: right;
    margin-right: 40px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Raleway';
    font-weight: 900;



}

nav ul li a {
    color: black;
    text-decoration: none;


}

nav ul li a:hover {
    color: blue;

}

.navbar {
    color: black;
    text-align: center;


}

a.btn {
    font-weight: 950;
}

#link {
    position: relative;
    bottom: 100px;
    padding-bottom:0px;
    margin-bottom:0px;
    margin-top: 0;
    padding-top: 100px;
}

p:first-letter {
    font-size: 200%;
}





article {
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 0px;
}

#top1 {

    font-size: 30px;
    text-align: center;

}

article h1 {
    font-size: 40px;
    text-align: center;
}



#history h1 {
    font-size: 50px;
    text-align: center;
    position: relative;
}


#history p {
    position: relative;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-bottom: 0;
    margin-top: 0;    
}

额外的HTML5空白区域白色间距

2 个答案: