当 IMG 标记位于 CSS 表格单元格中时，其他单元格的上边距奇怪答案

【问题标题】：Strange top margin in other cells when IMG tag is first in a CSS table cell当 IMG 标记位于 CSS 表格单元格中时，其他单元格的上边距奇怪
【发布时间】：2011-07-21 15:19:45
【问题描述】：

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

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

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

【问题讨论】：

标签： css image css-tables

【解决方案1】：

当我使用 display:table 属性创建 CSS 表格时

您遇到此问题是因为 divs 的默认 vertical-align 是 baseline（我假设您正在使用它）。

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

【讨论】：

太棒了。我没有意识到垂直对齐默认设置。谢谢！
@Charles：没问题。如果我的回答解决了你的问题，你应该accept it。