表的获取1px的不需要的填充
出于某种原因，我在桌上获得1px的填充或边框。 我无法弄清楚如何摆脱它。 我试过添加display:block;margin:0;padding:0; 图像，但这并不能解决它。 我也尝试过<table border="0">和border:none; 在CSS中。 对于我的生活，我无法弄清楚这一点。
这是一个问题的原因是因为我试图让图像与tr两侧的边缘对齐，给它四舍五入的边框，因为CSS3 border-radius在TR上不起作用。 我向CSS添加了table, table * {border:1px solid red;} ，并且从中看起来确实看起来像是填充或边距问题。
问题出现在这张图片中：
在左侧和右侧，你可以看到图像和桌子边缘之间有某种填充或某种东西。 红色的边界只是为了看到这一点。
这是我的CSS：
table a {
color: #f7941E;
font-family: Arial;
font-size: 16px;
font-weight: bold;
/* css3 */
transition: color .25s;
-khtml-transition: color .25s;
-moz-transition: color .25s;
-o-transition: color .25s;
-webkit-transition: color .25s;
}
table a:hover {
color: #f8ae57;
}
table {
width: 610px;
}
table tr {
height: 33px;
padding: 0;
margin: 0;
vertical-align: middle;
}
table td {
border-collapse: collapse;
}
table tr.head {
color: #58585a;
font-family: Rockwell, serif;
font-size: 18px;
font-weight: bold;
text-transform: lowercase;
}
table tr.even {
background: #EEE;
height: 33px;
}
table tr td img {
padding: 0 15px 0 13px;
vertical-align: middle;
}
table tr td a img {
opacity: .6;
/* css3 */
transition: opacity .25s;
-khtml-transition: opacity .25s;
-moz-transition: opacity .25s;
-o-transition: opacity .25s;
-webkit-transition: opacity .25s;
}
table tr td a img:hover {
opacity: 1;
}
和HTML：
<table border="0">
<tr>
<td><img src="images/tr-left.png" style="display:block;margin:0;padding:0;">
<td><img src="images/some-icon.png" /> <a href="#">Some Content</a></td>
<td><img src="images/tr-right.png" style="display:block;margin:0;padding:0;">
</td>
</table>
尝试： <table border="0" cellpadding="0" cellspacing="0">
这似乎为我解决了一些问题。
CSS：
table {
width: 610px;
border-spacing:0; /* Add this here */
}
我的问题是一些奇怪的行为，并且我尝试了书中的所有技巧，但是这种填充是固执的。 最后我发现，为body元素设置的line-height属性创建了padding-top效果。 在用本地化的规则覆盖其中之后
line-height: normal;
...问题解决了。
链接地址: http://www.djcxy.com/p/16961.html