我创建了一个导航栏，但当我将鼠标悬停在链接上时，ul和a:hover之间会有这个间隙。我只是想弄清楚如何消除间隙，让悬停覆盖整个区域。
我试着去掉ul的填充物，但悬停只会破坏它的容器，使ul变小。我试着在谷歌chrome上使用检查工具。它向我展示了ul的填充是1rem，a是1 rem，但我不明白差距是从哪里来的。我已经将通用选择器设置为包括填充，并将边距设置为0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<title></title>
<style>
:root{
--max-width: 1100px;
--dark-color: #333;
--light-color: #f3f3f3;
--primary-color: #93cb52;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Karla', sans-serif;
line-height: 1.5;
background: var(--light-color);
}
a{
color: black;
text-decoration: none;
}
ul {
list-style: none;
}
img {
width:100%;
}
/*Utility*/
.container {
max-width: var(--max-width);
margin:auto;
padding: 0 2rem;
overflor:hidden;
}
,btn {
display: inline-block;
border: none;
background: var(--dark-color);
color: #fff;
padding: 0.5rem 1.5rem;
}
.bg-dark {
background: var(--dark-color);
}
/*Main-nav*/
#main-nav .container{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
#main-nav .container h1 {
flex:2;
}
#main-nav ul{
display: flex;
justify-content:center;
align-items: center;
padding:1rem;
background: white;
}
#main-nav ul li a {
flex:1;
padding:1rem;
color: black;
}
#main-nav ul li a:hover{
background: #333;
color: #fff;
}
</style>
</head>
<body>
<nav id="main-nav" class="bg-dark">
<div class="container">
<h1 class="header-logo">Experience</h1>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
我只想知道为什么会有缺口，以及如何消除它。
您的line-height属性对于导航栏的高度来说太大了。作为一个修复，只需从这个css标签中删除该属性：
body{
font-family: 'Karla', sans-serif;
/* line-height: 1.5; << Remove this guy */
background: var(--light-color);
}
这里有一个示例JSFiddle，来自您的代码，并进行了更改。
从正文中删除行高，从类似ul的中删除左右填充
#main-nav ul{
display: flex;
justify-content:center;
align-items: center;
padding:1rem 0rem;
background: white;
}
body{
font-family: 'Karla', sans-serif;
background: var(--light-color);
}