如何从表中删除此空白区域？

Question

我有一个表格，我已经简化了这个问题，同时保留了这个问题 它是一排有三个单元格。中间的一个包含一个图像，第一个和最后一个填充剩余的空间，文本上应该是空的 第一个和最后一个单元格的高度适应中心（图像）的高度，因为它是最高的，这确实有效 -
但是它们比在中心单元下方可视地形成一个洞要大得多。

HTML：

<article class="content" id="pc">
    <table id="contentTable">
    <tr>
    <td class="pad" id="padL"></td>
    <td id="cc">
        <a href="#"><img src="http://38.media.tumblr.com/b9dc51057ece7352d07d40f4c59f0c65/tumblr_nb0xmfghdm1tin2h1o1_500.jpg" width="250"/>
   </a>
             </td>
     <td class="pad" id="padR"></td>
     </tr>
     </table>
     </article>

CSS：

 #contentTable {
    table-layout: fixed;
    width: 700px;
 }

 #cc {
    width: 500px;
 }

 .pad {
     background-color: gray;
     vertical-align: middle;
 }

 #padR {
     border-top-right-radius: 2em;
     border-bottom-right-radius: 2em;
 }

 #padL {
     border-top-left-radius: 2em;
     border-bottom-left-radius: 2em;
 }

以下是蓝色突出显示的问题的屏幕截图 如果有帮助，请CodePen。

为什么会发生这种情况？如何将其删除？

Answer 1

由于您的图片为inline，因此它符合基线规则并且底部有空格。

我通过设置获得了成功：

img {
    display:block;
}

为了摆脱其他桌面间距（未在屏幕截图中显示），我建议添加：

#contentTable {
    border-collapse:collapse;
    ...
}

#contentTable tr td{
    padding:0;
}

WORKING EXAMPLE

修改

根据您的评论，这是使用嵌入式YouTube视频（iframe）的示例。 iframe默认为display:inline（replaced element）。

iframe { display:block; }

WORKING EXAMPLE

Answer 2

将类添加到包含图片的单元格中。

    <td class="pad" id="cc">