Html 什么'；我的手机菜单项之间有很大的差距吗？

我创建了一个汉堡包移动菜单，由于某些原因，链接之间存在不必要的间隙

@仅媒体屏幕和（最大宽度：440px）{
.elementor导航菜单a{
显示：内联块；
}
.移动通讯{
空白：nowrap；
位置：相对位置；
宽度：100%；
显示：内联块；
}
#移动联络{
空白：nowrap；
位置：相对位置；
宽度：100%；
显示：内联块；
}
@仅介质屏幕和（最大宽度：375px）{
.变小{
字体大小：95%；
}
}
@仅介质屏幕和（最大宽度：375px）{
.电邮及流动电话{
宽度：28px；
}
}
@仅介质屏幕和（最大宽度：375px）{
.facebook手机{
宽度：28px；
}
}
@仅介质屏幕和（最大宽度：375px）{
.栏目联系人{
填充：5px30px；
}
}
@仅介质屏幕和（最大宽度：375px）{
移动电话{
颜色：#142c7c！重要
}
}
.主动{
边框底部：2.11px实心#61f6ff；
填充：4px；
框大小：边框框；
利润底部：4倍；
}

|

为什么不在每个视口宽度上设置

.elementor导航菜单a:{display:inline block；}

？因为这个汉堡菜单只在手机上显示，所以它与其他宽度无关。您有

.elementor导航菜单a、.elementor导航菜单a:焦点、.elementor导航菜单a:悬停{padding:10px 20px；}

-在图标之间创建填充。我想，这就是你所说的不需要的间隙。你可以检查devtools中的任何元素-它显示应用规则的位置。在这种情况下，

padding

位于

frontend.min.css？ver=2.0.11

中。你不需要为每个要设置样式的元素添加新的@media查询。Instead每种宽度使用一次，并将所有适用的内容放在括号内。