Html 底部导航栏空白

我目前正在尝试学习HTML5，将Javascript和CSS集成在一起，在画布上制作一个基于web的游戏，我目前正在底部导航栏上工作，在我对游戏本身做任何事情之前，我想处理所有可链接的对象，如导航栏和选项卡

任何人在尝试制作导航栏时，我遇到了一个问题，导致我的导航栏和它下面的边界之间有空格，使其看起来相当粗糙，我个人认为，我提供了我当前的代码如下：

.container h1{
边际上限：0；
垫面：1米；
}
托普纳夫先生{
背景色：黑色；
溢出：无；
}
.topnav a{
浮动：中心；
位置：相对位置；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
边框底部：20px实心透明；
}
.topnav a:悬停{
边框底部：5px纯红；
}
.topnav a：激活{
边框底部：8px实心红色；
}

电力之旅-游戏关于生产电力随着时间的推移
|  |  | 

问题其实不是什么问题：）规则是按照指定的方式应用的，在这种情况下，您给标记添加了太多的填充。请看下面我注释掉您的规则的地方

注意，我删除了一些东西只是为了让它更可读

.container h1{
边际上限：0；
垫面：1米；
}
托普纳夫先生{
背景色：黑色；
溢出：无；
文本对齐：居中；
}
.topnav a{
浮动：中心；
位置：相对位置；
颜色：#F2F2；
文本对齐：居中；
/*填充：14px 16px；*/
填充：5px16px；
文字装饰：无；
字号：17px；
边框底部：20px实心透明；
}
.topnav a:悬停{
边框底部：5px纯红；
}
.topnav a：激活{
边框底部：8px实心红色；
}

请问您的阅读材料是从哪里来的<代码>是，页脚需要放入您的正文标签中。试着看看你是否喜欢。我正在读W3学校的资料。顺便说一下，谢谢你的帮助。对我有用的答案