CSS 表格单元格填充、间距
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<style type="text/css">
table {
border: 0;
padding: 0;
border-collapse: collapse;
}
td {padding: 0}
</style>
</head>
<body>
<table bgcolor="gray" width="100%">
<tr>
<td bgcolor="black" height="14px">
<img src="_images/top_top_line.png" width="800px" height="14px" border="0" alt="">
</td>
</tr>
<tr>
<td height="14px">
<img src="_images/top_top_line.png" width="800px" height="14px" alt="">
</td>
</tr>
</table>
</body>
</html>
在上一个歌剧和 ie8 中我看到: http://eta.name/timages/padding.png
如果我在 Opera 中删除 DOCTYPE 声明一切正常,但在 ie 中没有任何变化。
如何正确删除填充?
我有简化的示例: http://eta.name/padding.html 存在TD问题。单元格中顶部有一个像素,底部有一些像素。如何删除这个?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<style type="text/css">
table {
border: 0;
padding: 0;
border-collapse: collapse;
}
td {padding: 0}
</style>
</head>
<body>
<table bgcolor="gray" width="100%">
<tr>
<td bgcolor="black" height="14px">
<img src="_images/top_top_line.png" width="800px" height="14px" border="0" alt="">
</td>
</tr>
<tr>
<td height="14px">
<img src="_images/top_top_line.png" width="800px" height="14px" alt="">
</td>
</tr>
</table>
</body>
</html>
In last opera and ie8 I see: http://eta.name/timages/padding.png
If I remover DOCTYPE declaration in Opera all ok, but in ie nothing changes.
How remove padding correct?
I have simplified example: http://eta.name/padding.html
There is TD problem. One pixel on top and some on bottom in cell. How to remove this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
那不是填充。图像是内联元素,因此它们被像字母一样对待。默认情况下,
vertical-align
设置为使图像的底部与 a、b、c 和 d 等字母的底部对齐。这为 j、g、p 和 y 等字母上的下降部分留出了空间。您可以使用
vertical-align
属性,但您不应该使用 表格进行布局 首先。That isn't padding. Images are inline elements, so they get treated like letters. By default the
vertical-align
is set so the bottom of the image lines up with the bottom of letters like a, b, c, and d. This leaves room below for the descenders you find on letters like j, g, p and y.You can twiddle with the
vertical-align
property, but you should just not use tables for layout in the first place.我会以不同的方式处理它。与其像这样与每个浏览器对抗,不如使用 CSS 重置,这样您就可以完全控制所有元素,并可以根据自己的意愿自由设置样式。我所知道的最好的是 Eric Mayer 的 http://meyerweb.com/eric/tools/css/重置/
I would approach it a different way. Instead of battling against each browser like this, use a CSS reset so you have full control over all elements and are free to style as you wish. The best I know of is Eric Mayer's http://meyerweb.com/eric/tools/css/reset/