为什么将图像添加到带有display的div：table-cell添加了一个填充的填充？

Question

我如何摆脱填充？

检查出来（jfiddle version）：

CSS：

.table
{
    display: table;
    height: 250px;

    border-color: black;
    width: 500px;
    padding: 0px;
}

.cell
{
    display: table-cell;
    height: 250px;
    width: 50%;
    padding 0px;
    border-color: blue;
    border-style: solid;
}

.cell img
{
    width: 250px;
    height: 250px;
    border-color: red;
    border-style: solid;
}

HTML：

<div class="table">
<div class="cell">
    <img src="">
</div>
<div class="cell">
    Caption
</div>
</div>

如果删除了img元素，则左侧单元格中的填充消失。奇怪的是，我将填充设置为0。

Answer 1

没有。您所看到的是行动中的默认vertical-align属性，即baseline。

如果您将单元格的垂直对齐方式更改为top（或middle或bottom，具体取决于您希望文本的位置），您将获得所需内容。

<强> jsFiddle example