html – 填充链接周围出现的边距

2023年3月28日 184次阅读

我正在制作一组导航链接.每当他们的：悬停样式被激活时,很明显链接周围有一个小的(可能是2px？)边距.我尝试过使用保证金：0;在一个样式上删除它,没有成功.我也试过设置保证金：0;在父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;
}
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>

最佳答案 菜单之间间距的原因不是边距,而是内联元素的宽度,在这种情况下是空格.

该问题的可能解决方案是：[为解决方案#1附加工作样本]

>(使用CSS)将font-size设置为容器块的0px,并设置标签的字体大小以显示内容. [见下面的片段]
>(修改HTML)在行之间进行注释以避免内联空间(在我看来这不是一个合适的解决方案)
>使用浮动(你不想要)

用于实施解决方案#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>
点赞