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

问题描述：

我的网页在我的内容之后有所有额外的白色间距。如果您将我的代码粘贴到您的IDE中，并且看起来会很棒！我已经尝试了一些东西，比如围绕页面的整个内容创建一个div，并在底部设置一些填充和边距，但我无法得到它！额外的HTML5空白区域白色间距

<!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; 
}

答

我想通了，为什么你有这样的大空的空间，这两样东西是这个问题：

使用bottom瓦特/填充和相对定位。
使用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>

嘿，你是绝对正确的我实际上把那个填充在那里意外哈哈！对于任何HTML元素来说，200填充是太多了。我有一个问题，虽然你能否澄清为什么使用与底部相对位置不好？当我通常将元素上推，下移，左移，右移或下移时，我通常会在这样做之前给它一个相对位置？这是不正确的还是有更好的方法？提前致谢。 –

它没有说它是_bad_。在这种情况下使用底部并不是一个好主意，因为它基于屏幕底部而不是下面的元素。您应该改用margin-bottom。 – suufi

哦，好吧，谢谢你，我欣赏它！ –

答

当我在我的系统已检查你的代码，我已经注意到这个问题，是因为填充和利润率的未来设置在您的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空白区域白色间距

相关推荐