页面顶部空白行清除问题求助（CSS/HTML）

我帮你排查下这个反复出现的页面顶部空白问题，这种情况我遇到过不少，结合你的代码和描述，大概率是这几个原因导致的，咱们一步步解决：

1. 修复HTML语法错误 #

先看你的HTML代码里的table标签：

<table class="container";>

这里多了一个多余的分号;，属于语法错误，可能导致浏览器解析样式时出现异常，进而产生莫名的空白。先把这个分号去掉，改成：

<table class="container">

2. 检查文件编码（BOM头问题） #

你提到审查元素看到body下有换行但源码没有，这很可能是UTF-8 BOM头在搞鬼——有些编辑器保存UTF-8文件时会自动加上BOM头（三个看不见的隐藏字符），浏览器渲染时会把这些字符解析成空白行。

解决方法：

• 用VS Code：打开文件后，点击右下角的编码标识（比如显示“UTF-8”），选择「通过编码保存」，再选「UTF-8 无BOM」
• 用Notepad++：菜单栏选「编码」→「转为UTF-8无BOM编码」，然后保存文件

3. 完善CSS重置样式 #

你的重置样式里漏掉了table相关元素的默认样式重置，浏览器对table有自带的margin/padding规则，可能导致顶部空白。在你的CSS重置代码里补充：

table, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

4. 临时调试方案（如果以上都没解决） #

如果还是有空白，可以给body加个强制样式快速验证：

body {
    line-height: 0;
    overflow-x: hidden;
}

这个是临时调试用的，找到根源问题后就可以去掉。

按照这几步来，应该就能彻底清除顶部的空白行了。

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