html - 为什么将图像添加到显示为 : table-cell add a whack-load of padding? 的 div

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