我已阅读了很多论坛,并在那里尝试了解决方案,但没有一个工作我仍然在我的所有图像之间有一个小的差距.这是代码:
<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;}
要么
#td2 img {vertical-align: bottom;}
小提琴演示:http://jsfiddle.net/audetwebdesign/WxrvC/
请注意,您已将5px填充设置为图像的顶部和右侧,我认为这是出于样式目的.
原文地址:https://www.jb51.cc/html/226136.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。