0

我有两个相邻的表格单元格 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/

4

2 回答 2

4

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

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

vertical-align: top;
于 2013-05-06T20:34:35.567 回答
0

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

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

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

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

于 2013-05-06T20:38:48.830 回答