我目前正在尝试学习集成Javascript和CSS的HTML5，以便在画布中制作基于Web的游戏，我目前正在底部导航栏上工作，然后再对游戏本身执行任何操作，我想处理所有可链接的对象，例如导航栏和选项卡。
任何人在尝试制作导航栏时遇到了一个问题，导致我的导航栏及其下方的边框在它们之间有空格，使它看起来很粗制滥造，我个人认为，我在下面提供了我当前的代码：
.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>还试图增加底部导航栏的黑色空间，以便导航栏的表面积更大，但不太确定如何：
我会选择这种类型的导航栏，或者可能将完整的页脚分成 4 个部分(每个导航 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>