Bagaimanakah saya boleh menghapuskan ruang putih kecil antara bar navigasi dan bahagian seterusnya? Bagaimana untuk menghilangkan ruang kelabu kecil pada pemilih tuding?
Saya mengekodkan tapak web ini sebagai projek akhir untuk kursus HTMl saya di freecodecamp dan saya menghadapi dua ralat yang saya tidak tahu bagaimana untuk membetulkannya. Di satu pihak, saya mempunyai garis putih kecil antara bar navigasi saya dan bahagian pertama. Sebaliknya, saya menggunakan pemilih tuding untuk menjadikan latar belakang pautan bar navigasi berwarna kelabu tetapi masih mengekalkan garis gelap kecil di bahagian bawah.
Garis putih kelihatan seperti ini:
Untuk membetulkan garis putih pertama, saya cuba mengalih keluar padding dan margin (ini mengalih keluar beberapa ruang putih di tepi, tetapi bukan ruang putih yang tinggal di antara dua bahagian. Saya juga menukar semua latar belakang CSS kepada biru. Bahagian mana yang mengisi ruang , dan ia hanya bertukar biru apabila saya menukar latar belakang badan, yang sudah mempunyai margin dan padding ditetapkan kepada 0
.Beginilah rupa garis hitam kecil itu: Seperti yang anda boleh lihat, terdapat garis hitam kecil di bawah latar belakang kelabu!
Untuk ini, saya cuba memahami ruang tepat yang diduduki oleh tab berbeza dalam bar navigasi (li, ul, a...) tetapi tidak berjaya, saya benar-benar tidak faham bagaimana tab ini memutuskan untuk menggunakan ruang atau tidak dalam bar navigasi. Saya tidak menemui sebarang label yang menggunakan ruang garis hitam tambahan.
Ini ialah 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>
Ini ialah 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);
}
Terima kasih banyak atas bantuan anda!
