html - 如何强制图像完全填充其表格单元格

Question

我已经阅读了许多论坛并在那里尝试了解决方案，但它们都没有奏效我的所有图像之间仍然存在小的差距。这是代码：

<table id="Table">
            <tr>
                <td id="td1"><h2>~ Curling ~</h2></td>
                <td id="td2" rowspan="2"><img src="../images/curlingMid.jpg" 
                width="100%" height="100%" border="2" alt=""/></td>
                <td id="td1"><h2>~ Curling ~</h2></td>
            </tr>
</table>


#td1 { width: 32%;vertical-align: text-top; }
#td2 { padding-right: 5px; padding-top: 5px; }

Answer 1

图像是一个内联元素，由于它与基线对齐的方式，它下方有一些空白区域。

要修复它，请尝试：

#td2 img {display: block;}

或者

#td2 img {vertical-align: bottom;}

小提琴演示：http: //jsfiddle.net/audetwebdesign/WxrvC/

请注意，您已在图像的顶部和右侧设置了 5px 填充，我认为这是出于造型目的。

此外，id属性在页面上应该是唯一的，使用class，更易于维护，并允许更轻松地重用 CSS 规则。

Answer 2

不同的浏览器使用不同的默认填充/边距/间距等呈现 html 元素。您可以尝试像这样重置这些：

#table td {padding: 0px; margin: 0px;}
#table {border-spacing: 0px;}