html - 如何删除表格元素中图像底部的边距?

标签 html css

我在表格元素中有一张图片,但图片下方似乎总是有空白。 下面的最小示例显示了问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>                                                                           
    <head>                                                                       
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      
        <style type="text/css">                                                  
            body {                                                               
                margin: 0;                                                       
                padding: 0;                                                      
            }                                                                    

            table {                                                              
                width: 100%;                                                     
                border-spacing: 0;                                               
            }                                                                    

            table td {                                                           
                padding: 0;                                                      
                border: 1px dotted;                                              
            }                                                                    
        </style>                                                                 
    </head>                                                                      

    <body>                                                                       
        <table>                                                                  
            <tr>                                                                 
                <td>                                                             
                    <img src="http://cdn.inquisitr.com/wp-content/2012/10/colonel-meow-facebook-e1349873175523.jpeg">
                </td>                                                            
            </tr>                                                                
        </table>                                                                 
    </body>                                                                      

</html>                 

最佳答案

将 CSS 样式 vertical-align: bottom; 添加到您的图片中,即可达到目的。除非您不需要图像 display: inline-block; 然后使用以前用户的答案!

关于html - 如何删除表格元素中图像底部的边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15034620/

相关文章:

javascript - 自定义 Select 和 Input 标签,IE 版本看起来很糟糕

javascript - 在 css 中设置固定大小并在 javascript 中使用它

javascript - 如何从 Controller 滑动输入

jquery - "webkit"是 CSS 标准吗?例如与 "@-webkit-keyframes flash{0%,50%,100%{opacity:1} ... ;animation-name:flash}"一起使用时

jquery - bootstrap可变网格设计布局结构

jquery - 使用 CSS3 的可扩展菜单项

html - 元素在父宽度上与空间平均分布 - Angular Flexlayout 响应

html - 文档流中的水平列表 : how to set background color/border for just a few contiguous elements?

html - 当我调整屏幕大小时,输入电子邮件字段和提交黑点已经重叠

css - 在 Chrome 中查看时,小设备尺寸的媒体查询不起作用