我已经阅读了许多论坛并尝试了那里的解决方案,但没有一个有效,我的所有图像之间仍然有一个小间隙。这是代码:
<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; }
该图像是一个内联元素,由于它与基线对齐的方式,其下方有一些空白。
要修复它,请尝试:
#td2 img {display: block;}
or
#td2 img {vertical-align: bottom;}
小提琴演示:http://jsfiddle.net/audetwebdesign/WxrvC/ http://jsfiddle.net/audetwebdesign/WxrvC/
Note您已经在图像的顶部和右侧设置了 5px 填充,我认为这是出于样式目的。
Also, id
属性在页面上应该是唯一的,使用class
,更容易维护,并允许更轻松地重用 CSS 规则。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)