DIV与TD单元格间上下空白问题解决求助

嘿，太懂这种看着多余空白闹心的感觉了！咱们先拆解问题根源，再给你针对性的解决方案：

问题原因 #

你遇到的上下空白主要来自两个核心点：

• 表格单元格(<td>)默认的vertical-align属性是baseline（基线对齐），而inline-block元素会跟着基线对齐，导致单元格顶部/底部莫名出现空隙
• 你给<td>加的font-size:0确实解决了inline-block之间的水平空白，但上下方向的空白和这个设置无关，得从垂直对齐逻辑入手

具体解决方案 #

直接给你修改后的代码，关键改动我都标出来了：

.square {
  background-color: Gray;
  width: 150px;
  padding: 20px;
  display: inline-block;
  margin: 0;
  font-size: 20px;
  vertical-align: top; /* 新增：让div和单元格顶部对齐，消除基线带来的间隙 */
}

<table style="border-collapse: collapse;"> <!-- 可选：确保表格边框合并，避免额外隐性间隙 -->
  <tr>
    <td style="background-color: Blue; font-size: 0; vertical-align: top;"> <!-- 新增：td设为顶部对齐，从根源消除垂直空隙 -->
      <div class="square">内容1</div>
      <div class="square">内容2</div>
      <!-- 你的其他square div内容 -->
    </td>
  </tr>
</table>

额外小提示 #

• 删掉了td里的margin: 0 auto，因为表格单元格(<td>)不支持margin属性，这个设置完全起不到作用
• 如果还有极其细微的间隙，可以检查浏览器默认的表格border-spacing，加上border-collapse: collapse就能彻底解决

这样改完后，单元格和内部div的上下空白应该就完全消失啦！

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