我正在制作一组导航链接。每当他们的 :hover 样式被激活时，很明显链接周围有一个小的(可能是 2px？)边距。我试过在 a 样式上使用 margin:0; 来删除它，但没有成功。我也试过在父级 div 上设置 margin:0;，但还是没有成功。
我已将代码包含在下面的代码片段中以说明问题。有谁知道造成这种情况的原因以及如何解决？
谢谢!
/* Animations */
div#top > div#nav-container a:hover {
color:#f7902b;
background-color:#fff;
}
/* Regular CSS */
div#top {
background-color:#333;
padding-top:10px;
padding-bottom:10px;
}
div#top > div#nav-container {
text-align:center;
}
div#top > div#nav-container a {
text-decoration:none;
color:#fff;
padding:10px 20px;
transition:color 0.25s,background-color 0.5s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/bootstrap/css/custom/nav.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="top" class="col-md-12">
<div id="logo-container" style="margin:auto;width:200px;">
<img src="assets/images/logo-banner.png" style="width:100%;" />
</div>
<hr style="margin:10px 0 10px 0;border-color:#444;" />
<div id="nav-container">
<a href="#">Breaking</a>
<a href="#">Politics</a>
<a href="#">Military</a>
<a href="#">Economy</a>
<a href="#">Development</a>
</div>
</div>
</body>
</html>最佳答案
菜单之间没有间距的原因是margin但是内联元素的宽度，在本例中是空格。
该问题的可能解决方案是:[附上解决方案 #1 的工作示例]
- (使用 CSS) 设置
font-size至0px容器 block 并设置font-size的a标签显示内容。 [见下面的片段] - (修改 HTML) 行间注释以避免行内空格(我认为这不是一个合适的解决方案)
- 使用 float (你不想要的)
用于实现解决方案 #1 的代码段
div#top > div#nav-container {
text-align:center;
font-size:0px;
}
div#top > div#nav-container a{
font-size:15px;
}
用于实现解决方案 #2(不推荐)
<div id="nav-container"><!--
--><a href="#">Breaking</a><!--
--><a href="#">Politics</a><!--
--><a href="#">Military</a><!--
--><a href="#">Economy</a><!--
--><a href="#">Development</a><!--
--></div>
/* Animations */
div#top > div#nav-container a:hover {
color:#f7902b;
background-color:#fff;
}
/* Regular CSS */
div#top {
background-color:#333;
padding-top:10px;
padding-bottom:10px;
}
div#top > div#nav-container {
text-align:center;
font-size:0px;
}
div#top > div#nav-container a{
font-size:15px;
}
div#top > div#nav-container a {
text-decoration:none;
color:#fff;
padding:10px 20px;
transition:color 0.25s,background-color 0.5s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/bootstrap/css/custom/nav.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="top" class="col-md-12">
<div id="logo-container" style="margin:auto;width:200px;">
<img src="assets/images/logo-banner.png" style="width:100%;" />
</div>
<hr style="margin:10px 0 10px 0;border-color:#444;" />
<div id="nav-container">
<a href="#">Breaking</a>
<a href="#">Politics</a>
<a href="#">Military</a>
<a href="#">Economy</a>
<a href="#">Development</a>
</div>
</div>
</body>
</html>关于html - 填充链接周围出现的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36681240/