Html 我的一个div被一个虚幻的顶部填充所困扰，似乎忽略了我的css文件

在过去的两天里，我一直在做一个非常简单的导航栏，里面只有几个按钮，其中一个应该显示一个下拉菜单。我已经用%设置了所有的填充，在大多数情况下它们都可以工作，除了包含显示下拉菜单按钮的div

/*所有字体都使用vw单位，因为它更容易发现幻影顶部填充*/
标题{
背景色：#101010；
}
收割台h1{
颜色：#ffffff；
边际：0px；
文本对齐：居中；
字体系列：“巴洛浓缩”；
字体大小：7vw；
填充：1%；
}
身体{
边际：0px；
背景色：#f0
}
ul，ol{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
内容{
宽度：100%；
明确：两者皆有；
}
导航{
背景色：#999999；
溢出：隐藏；
字体系列：“巴洛浓缩”；
大纲：无；
边界：0px；
}
.dropdown：悬停，.dropbtn{
背景色：红色；
}
/*这包含下拉列表*/
.下拉列表{
浮动：左；
溢出：隐藏；
填充：1.5%；
}
/*这是按钮*/
.下拉菜单{
字体大小：1.2vw；
边框样式：无；
边框宽度：0px；
大纲：无；
颜色：白色；
填充：1.5%；
背景色：继承；
字体家族：继承；
利润率：0%；
}
/*下拉内容*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：10%；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
利润率最高：1.5%；
左边距：-1.5%；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
文字装饰：无；
显示：块；
浮动：无；
字体大小：1.1vw；
填充：2%；
}
/*下拉列表中链接的背景色（悬停）*/
.下拉列表内容a:悬停{
背景色：#ddd；
}
/*显示悬停时的下拉列表*/
.下拉：悬停.下拉内容{
显示：块；
}
/*导航栏中的其他按钮，按预期工作*/
.波顿{
浮动：左；
字体大小：1.2vw；
边框样式：无；
边框宽度：0px；
大纲：无；
颜色：白色；
填充：1.5%；
背景色：继承；
字体家族：继承；
保证金：0；
文字装饰：无；
}
a.波顿{
浮动：左；
字体大小：1.2vw；
边框样式：无；
边框宽度：0px；
大纲：无；
颜色：白色；
背景色：继承；
字体家族：继承；
保证金：0；
文字装饰：无；
}
.波顿：悬停{
浮动：左；
字体大小：1.2vw；
边框样式：无；
边框宽度：0px；
大纲：无；
颜色：白色；
填充：1.5%；
背景色：红色；
字体家族：继承；
保证金：0；
文字装饰：无；
}

解释起来有点棘手，但基本上这是因为按钮不是作为
A
元素浮动的，并且默认的
行高定义了行框的高度，当字体变小时，行框的高度会变大。因此，phatom padding是由
行高度定义的行框高度

一个简单的修复方法是使按钮像链接一样浮动，因此它将是块级元素，而不再是内联级元素


/*所有字体都使用vw单位，因为它更容易发现幻影顶部填充*/
标题{
背景色：#101010；
}
收割台h1{
颜色：#ffffff；
边际：0px；
文本对齐：居中；
字体系列：“巴洛浓缩”；
字体大小：7vw；
填充：1%；
}
身体{
边际：0px；
背景色：#f0
}
ul，
ol{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
内容{
宽度：100%；
明确：两者皆有；
}
导航{
背景色：#999999；
溢出：隐藏；
字体系列：“巴洛浓缩”；
大纲：无；
边界：0px；
}
.下拉：悬停，
.dropbtn{
背景色：红色；
}
/*这包含下拉列表*/
.下拉列表{
浮动：左；
溢出：隐藏；
填充：1.5%；
}
/*这是按钮*/
.下拉菜单{
字体大小：1.2vw；
边框样式：无；
边框宽度：0px；
大纲：无；
颜色：白色；
填充：1.5%；
背景色：继承；
字体家族：继承；
利润率：0%；
浮动：左；
}
/*下拉内容*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：10%；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
利润率最高：1.5%；
左边距：-1.5%；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
文字装饰：无；
显示：块；
浮动：无；
字体大小：1.1vw；
填充：2%；
}
/*下拉列表中链接的背景色（悬停）*/
.下拉列表内容a：悬停{
背景色：#ddd；
}
/*显示悬停时的下拉列表*/
.下拉：悬停.下拉内容{
显示：块；
}
/*导航栏中的其他按钮，按预期工作*/
.波顿{
浮动：左；
字体大小：1.2vw；
边框样式：无；
边框宽度：0px；
大纲：无；
颜色：白色；
填充：1.5%；
背景色：继承；
字体家族：继承；
保证金：0；
文字装饰：无；
}
a.波顿{
浮动：左；
字体大小：1.2vw；
边框样式：无；
边框宽度：0px；
大纲：无；
颜色：白色；
背景色：继承；
字体家族：继承；
保证金：0；
文字装饰：无；
}
.波顿：悬停{
浮动：左；
字体大小：1.2vw；
边框样式：无；
边框宽度：0px；
大纲：无；
颜色：白色；
填充：1.5%；
背景色：红色；
字体家族：继承；
保证金：0；
文字装饰：无；
}

大标题文本
下拉列表
添加
行高：0
到那个按钮在css中的
下拉列表
类中点击
行高：0
，我就知道了。不过，别问我为什么：）我想，这或多或少能把它钉牢。另一种选择是将
字体大小：1.2vw
从按钮移动到其div-con