Jac*_*Dev 11 html css html-table margin padding
出于某种原因,我在桌子上得到1px填充或边框.我无法弄清楚如何摆脱它.我已经尝试添加display:block;margin:0;padding:0;到图像,但这并没有解决它.我也试着<table border="0">和border:none;在CSS.对于我的生活,我无法弄清楚这一点.
这是一个问题的原因是因为我试图让图像与tr两侧的边缘对齐,以给它圆形边框,因为CSS3 border-radius不适用于TR.我已经添加table, table * {border:1px solid red;}到CSS,从那里,它肯定看起来像填充或边距问题.
问题出在这张图片中:

在左侧和右侧,您可以看到图像和桌子边缘之间存在某种填充或某种东西.红色边框只是为了看到这一点.
这是我的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;
}
Run Code Online (Sandbox Code Playgroud)
和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>
Run Code Online (Sandbox Code Playgroud)
BDa*_*awg 11
这似乎解决了我的问题.
CSS:
table {
width: 610px;
border-spacing:0; /* Add this here */
}
Run Code Online (Sandbox Code Playgroud)