关于sfwatertaxi.net移动端页脚导航下方间距过大的技术问询

以下是针对该问题的具体排查方向：

• 检查多列布局的默认间距：column-count启用的多列布局自带默认column-gap，移动端屏幕尺寸小，这个默认间隙可能被放大感知。可以显式设置column-gap为更小的值（比如column-gap: 1rem），同时排查ul.nav下的li元素是否继承了全局样式里过大的margin-bottom或padding-bottom。
• 排查inline-block的垂直对齐问题：display: inline-block会让元素受字体基线影响，产生额外垂直间距。给ul.nav加上vertical-align: top，或者替换成display: block测试，多列布局在块级容器上表现更稳定。
• 检查移动端媒体查询冲突：确认是否有针对小屏幕的媒体查询，给ul.nav或其子元素设置了不合理的margin、padding，或是父容器被强制设置了过大的height/min-height，导致导航项被撑开。
• 重置列表默认样式：浏览器默认的ul和li带有margin和padding，可以先给ul.nav li添加margin: 0; padding: 0;，再逐步调整所需的间距，排除默认样式干扰。

你当前使用的页脚导航列代码：

ul.nav {
    column-count: 3;
    display: inline-block;
}

内容的提问来源于stack exchange，提问作者CountryMusic