css - 当 IMG 标签首先出现在 CSS 表格单元格中时，其他单元格中出现奇怪的上边距

Question

我在编程时多次注意到这个错误，想知道是否有人有变通办法。当我使用 display:table 属性创建 CSS 表格时，如果我的一个单元格包含一个 IMG 作为第一个元素，则相邻单元格中的文本将从该图像的高度下方开始。如果我在图像标签之前放置任何文本，那么下一个单元格中的文本将正常显示。

我还注意到，如果 IMG 的显示属性是 block ，那么下一个单元格中的文本将从图像下方开始，但如果 IMG 设置为显示:内联，则隔壁的文本将其基线与图像的基线。

理想情况下，我希望所有内容都从每个单元格的顶部开始，有时我希望以图像开始一列。

Answer 1

When I create a CSS table using the display:table property

您遇到此问题是因为默认的 vertical-align 是 div 的 baseline(我假设您正在使用) .

要修复它，只需在具有 display: table-cell 的任何内容上指定 vertical-align: top。