我將這個網站編碼為 freecodecamp 上 HTMl 課程的最后一個專案，我遇到了兩個錯誤，我不知道如何修復。一方面，我的導航欄和我的第一部分之間有一條小白線。另一方面，我使用懸停選擇器將導航欄鏈接的背景設為灰色，但底部有一條較暗的小線。
這是白線的樣子：
為了修復第一條白線，我嘗試洗掉填充和邊距（洗掉了邊緣上的一些空白，但沒有洗掉兩個部分之間剩下的空白。我還將所有 CSS 背景更改為藍色以找出哪個部分填充了空間，當我改變身體的背景時它才變成藍色，它已經將邊距和填充設定為 0。
這是小黑線的樣子：
如您所見，灰色背景下方有一條小黑線！
對于這個，我試圖了解我的導航欄中不同標簽占用的確切空間（li，ul，a ...）無濟于事，我真的不明白這些標簽如何決定占用空間，或者不在導航欄內. 我找不到任何占用額外黑線空間的標簽。
這是 HTML：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Double Team Cooking</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<section id="welcome">
<nav id='navbar'>
<ul>
<li><a href="#whodis">Who Am I?</a></li>
<li><a href="#Projectos">My Projects</a></li>
<li><a href="#hola">Contact</a></li>
</ul>
</nav>
</section>
<section id='Who-Am-I'>
<h2 id='whodis'>Who Am I?</h2>
<p> Hey, I'm Pedro.</p>
<p> A man, a cook, a student, a coder, a business developer, a problem solver.</p>
</section>
<section id='Projects'>
<h2 id='Projectos' class="project-title">My Projects</h2>
<p>So, what am I working on?</p>
<div id="electriccar"></div>
<div id="website"></div>
<div id="TWR"></div>
</section>
<section id="Contact">
<h2 id="hola">Contact Me</h2>
<p>You'd like to reach out? Of course! Feel free to reach out to me through these mediums!</p>
</section>
</body>
</html>
這是 CSS：
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
width: 100%;
padding: 0px;
margin: 0px;
}
nav {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 40px;
background-color: rgb(24,24,24);
}
nav ul {
display: flex;
justify-content: space-evenly;
list-style-type: none;
padding-left: 0px;
width: 100%;
height: 100%;
margin: 0px;
align-items: center;
}
nav li {
display: inline-block;
}
li a {
text-decoration: none;
color: white;
padding: 10px;
}
li a:hover {
background-color: rgb(64,64,64);
}
#Who-Am-I {
height: 100%;
background-color: rgba(0,30,0,0.8);
}
非常感謝您的幫助！
uj5u.com熱心網友回復：
嘗試
* {
padding: 0;
margin: 0;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/533959.html
上一篇：有限硬幣-使用遞回