css表格单元格，内容有不必要的上边距

Question

我在代码中使用div块的表格单元格排列。我的代码存在问题。

预览我的html外观是here

当我在第一个面板中有任何内容（文本或图像）时，第二个和第三个面板的.inner div的上边距约为10-15像素。那是为什么？

任何人都可以看一下，让我知道我错过了什么。

Answer 1

在vertical-align:top;

中添加#wrapper > div

请参阅演示：http://jsbin.com/avozik/14/edit

Answer 2

我有一个类似的案例，vertical-align:top;解决了这个问题。但是我想详细说明这背后的原因：

https://jsfiddle.net/46tyc48y/1/

由于表格单元格默认使用vertical-align:baseline;，因此右侧单元格文本将与图像的基线（底部）对齐，从而在顶部创建幻像间距。因此，我们需要明确设置vertical-align以绕过此行为。