1
我的網頁在我的內容之後有所有額外的白色間距。如果您將我的代碼粘貼到您的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;
}
嘿，你是絕對正確的我實際上把那個填充在那裏意外哈哈！對於任何HTML元素來說，200填充是太多了。我有一個問題，雖然你能否澄清爲什麼使用與底部相對位置不好？當我通常將元素上推，下移，左移，右移或下移時，我通常會在這樣做之前給它一個相對位置？這是不正確的還是有更好的方法？提前致謝。 –
它沒有說它是_bad_。在這種情況下使用底部並不是一個好主意，因爲它基於屏幕底部而不是下面的元素。您應該改用margin-bottom。 – suufi
哦，好吧，謝謝你，我欣賞它！ –