0
我想刪除的導航欄和主div之間有一點距離。 footer的情況也是如此（主div包含除了footer和nav之外的所有內容）。我試過 保證金：0 margin-bottom：0 padding：0 etc nd東西，但它不工作。無法刪除我的導航欄下的空間
我檢查了幾次代碼，但找不到問題。我也搜索了谷歌，但它只是讓我困惑。
我是新來編碼，所以有相當的可能性，愚蠢的錯誤:)。
<! DOCTYPE html>
<html lang = "en" >
<head>
<base href = "D:\workstation\my webpages\3rd day\" />
<title>
Home
</title>
<link rel = "stylesheet" type = "text/css" href= "style.css" />
</head>
<body >
<nav id = "top-menu" >
<ul>
<li><a href = "home.html">Home</a></li>
<li><a href = "rock.html">Rock</a></li>
<li><a href = "paper.html">Paper</a></li>
<li><a href = "sci.html">Scissor</a></li>
<li><a href = "contact.html">Contact</a></li>
<li><a href = "buy.html">Buy</a></li>
</ul>
</nav>
<div id = "maindiv" >
<header>
<hgroup>
<h1> Rock Paper Scissors Corporation </h1>
<h2>Who Will Win!?</h2>
</hgroup>
<p>Oh, the suspense!</p>
</header>
<p class = "message" > Game status: Using HTML5 Drag and Drop</p>
<!--
<section id = "rpsgame">
<div id = "dnd" >
<div >
<img src = "D:\workstation\Ex_Files_HTML_EssT_2012\Free Exercise Files\Chap17\images\rock.png" height = 240px width = 240px /><footer>Rock</footer>
</div>
<div>
<img src = "D:\workstation\Ex_Files_HTML_EssT_2012\Free Exercise Files\Chap17\images\paper.png" height = 240px width = 240px /><footer>paper</footer>
</div>
<div>
<img src = "D:\workstation\Ex_Files_HTML_EssT_2012\Free Exercise Files\Chap17\images\scissors.png" height = 240px width = 240px /><footer>scissors</footer>
</div>
</div>
</section>
-->
<div class = "clear" ></div>
</div> <!-- main div ends here -->
<footer class = "foot">
<p>Copyright © 2017 Hamza waqar practice document</p>
</footer>
</body>
</html>
/*css starts from here*/
/*menu formating starts */
body {
width : 100%;
margin: 0;
padding: 0;
background-color : #a60;
}
nav#top-menu {
width: 100%;
height: 40px;
background-color: #531;
margin: 0;
padding: 0;
}
#top-menu ul {
display: block;
list-style-type: none;
width: 600px;
margin: 0 auto;
padding: 0;
}
#top-menu ul li a {
display: block;
float: left;
max-height: 35px;
width: 100px;
margin: 0;
padding: 5px 0;
font-family: tahoma, sans-serif;
font-size: 25px;
text-align: center;
background-color: #531;
text-decoration: none;
color: #da1;
}
#top-menu ul li a:hover { border-bottom: 2px solid brown;}
/*menu ends*/
body, p {
line-height: 1;
font-family: Georgia, serif;
font-size: 16pt;
}
h1, h2, h3, h4, h5, h6 {
font-family: tahoma, sans-serif;
color: #531;
margin: .25ex 12pt;
}
h1 { font-size : 200% }
h2 {
font-size: 130%;
color: #840; }
header p {
font-family: tahoma, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 85%;
margin: .25ex 12pt;
color: #531;
}
#maindiv {
width: 900px;
margin: 0 auto ;
padding : 0;
background-color: #eec;
}
p.message {
width: 766px;
margin: .5ex 0;
font: normal 1em Tahoma, sans-serif;
padding: 3px;
background-color: #da1;
color: black;
margin-left : 20px;
margin-top :20px;
}
section#rpsGame {
margin: 1em;
}
#dnd div {
float: left;
margin-right: 20px;
margin-bottom: 20px;
border: 2px solid #da1;
}
#dnd footer {
background-color: #da1;
font-family: Tahoma, sans-serif;
font-weight: bold;
text-align: center;
padding: 3px 0;
}
.clear {
margin: 0;
padding: 0;
clear: both;
}
footer.foot {
width : 100%;
margin : 0;
padding :0;
background-color : grey;
height : 40px;
width : 100%;
}
footer.foot p { color: #ccc;
font-size: 70%;
font-family: tahoma, sans-serif;
text-align: center;
margin: 0;
padding: 10px 0;
}
你使用瀏覽器中的「檢查元素」？ – Brian
歡迎來到堆棧溢出，@Hamza Waqar也許增加一個標記的屏幕截圖會讓你的圖像問題更加清晰？ – Degan