为什么我会在表格单元div上获得大量填充

Question

我有两个相邻的表格单元格div，但由于某种原因，有一个似乎是我没有创建的巨大边界顶点，我不知道为什么。

<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

的默认垂直对齐的细胞是基线。您会注意到图像和文本的第一行实际上共享相同的基线，因此对齐。这是无论display财产，你可以看到相同的行为，不要把显示器进入细胞：

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

最简单的解决方法是可能改变这两种细胞具有相同的垂直对齐方式。我认为vertical-align: middle效果最好。

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

Answer 2

你有相同的高度两个单元。顶部空间是因为文本默认为“基线”的垂直对齐。

的CSS添加到您的细胞：

vertical-align: top;