添加 img 标签时 css 显示表格布局中断

Question

关于显示表和 img 标签，我对 css 有疑问。这是说明问题的 jsfindle 链接:

jsfiddle

代码简化:

<section>
<article class="image">
    <img src="http://www.locostusa.com/forums/download/file.php?avatar=16004_1381633145.jpg"/>
</article>
<article>
    <span>.....</span>
</article>
</section>

我有一个带有 display:table 的部分选项卡和两个带有 display:table-cell 的文章标签。在第一篇文章标签中，我有一个 img 标签，在第二篇文章标签中，我只有一个带有文本的 span。

问题是文本渲染时有一个几乎比图像大的空间。我该怎么做才能摆脱空间？

Answer 1

将 vertical-align:top 添加到 article 元素，因为您将显示更改为 table-cell。 vertical-align 属性的默认值为baseline；因此文本与底部对齐。

Updated Example

article {
    display: table-cell;
    border: 1px solid grey;
    vertical-align: top;
}

值得注意的是，middle 和 bottom 等值也可以使用。您基本上只需要更改默认值即可。