Question

我有两个彼此相邻的表格单元格，但由于某种原因，我有一个似乎是巨大的边缘顶部，我没有创建，我不知道为什么。“ / p>

<div style="display:table;">
<div style="display:table-cell;">
    <img src="http://a0.twimg.com/profile_images/3181865974/b3583cd60d3d21ea9b9776634084b710_normal.png" />
</div>
<div style="display:table-cell;">
    <div>Your compiler finds a big block of commented-out code… It knows it shouldn't look… Takes the tiniest of tiny peeks… BLUSHES BRIGHT RED.Your compiler finds a big block of commented-out code… It knows it shouldn't look… Takes the tiniest of tiny peeks… BLUSHES BRIGHT RED.</div>
</div>

JSFiddle：http://jsfiddle.net/HycBx/

Answer 1

两个单元格的高度相同。顶部的空间是因为文本默认为＆＃34;基线＆＃34;的垂直对齐。

将css添加到您的单元格中：

vertical-align: top;

Answer 2

单元格的默认垂直对齐方式是基线。您会注意到图像和文本的第一行实际上共享相同的基线，因此对齐。这与display属性无关，您可以在不将显示拆分为单元格的情况下看到相同的行为：

http://jsfiddle.net/ExplosionPIlls/HycBx/2/

最简单的修复可能是将两个单元格更改为具有相同的垂直对齐方式。我认为vertical-align: middle效果最好。

http://jsfiddle.net/ExplosionPIlls/HycBx/3/

为什么我在table-cell div之上获得了大量填充

2 个答案: