底部导航栏空白

Question

我目前正在尝试学习 HTML5 与 Javascript 和 CSS 的集成，以便在 canvas 中制作基于网络的游戏，我目前正在工作在我对游戏本身做任何事情之前，在底部导航栏上我想处理所有可链接的对象，例如导航栏和选项卡。

任何人在尝试制作导航栏时遇到一个问题，导致我的导航栏及其下方的边框在两者之间有白色space，这让我个人认为它看起来很劣质，我在下面提供了我当前的代码：

.container h1 {
  margin-top: 0;
  padding-top: 1em;
}

.topnav {
  background-color: black;
  overflow: none;
}

.topnav a {
  float: center;
  position: relative;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 20px solid transparent;
}

.topnav a:hover {
  border-bottom: 5px solid red;
}

.topnav a:active {
  border-bottom: 8px solid red;
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text-html" charset="utf-8">
  <title>Power Trip - The game about producing power over time</title>
</head>

<!-- Main Game Canvas Codeblock -->

<body>
  <canvas width="1280" height="720" id="GameCanvas" style="">
                
            </canvas>
</body>

<!-- End of Main Game Canvas Codeblock -->
<!-- Bottom Nav Codeblock -->

<footer>
  <center>
    <div class="topnav">
      <div><a href="">Website</a> | <a href="">Facebook</a> | <a href="">Twitter</a> | <a href="">Contact Us</a></div>
    </div>
  </center>
</footer>

<!-- End of Bottom Nav Codeblock -->

</html>

还尝试增加底部导航栏的黑色 space，以便导航栏有更大的表面积，但不太确定如何：

我会选择这种类型的导航栏，或者可能将整个页脚分成 4 个部分（每个导航 1 个部分）运行并排。

感谢您提供的任何帮助。

Answer 1

问题并不是真正的问题 :) 规则是按规定应用的，在这种情况下，您向标签添加了过多的填充。请参阅下面我注释掉您的规则的地方

请注意，我删除了一些内容以使其更具可读性

.container h1 {
  margin-top: 0;
  padding-top: 1em;
}

.topnav {
  background-color: black;
  overflow: none;
  text-align: center;
}

.topnav a {
  float: center;
  position: relative;
  color: #f2f2f2;
  text-align: center;
  /* padding: 14px 16px; */ 
  padding: 5px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 20px solid transparent;
}

.topnav a:hover {
  border-bottom: 5px solid red;
}

.topnav a:active {
  border-bottom: 8px solid red;
}

<body>
  <!-- End of Main Game Canvas Codeblock -->
  <!-- Bottom Nav Codeblock -->

  <footer>
      <div class="topnav">
        <div>
          <a href="">Website</a>
          <a href="">Facebook</a>
          <a href="">Twitter</a>
          <a href="">Contact Us</a>
        </div>
      </div>
  </footer>
</body>

底部导航栏空白

Bottom Nav Bar Whitespace

html

css

navigation