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

时间:2013-02-22 22:59:00

标签: 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>                 

2 个答案:

答案 0 :(得分:2)

将CSS样式vertical-align: bottom;添加到您的图片中,即可。除非您不需要图像为display: inline-block;,否则请使用上一个用户的答案!

答案 1 :(得分:0)

您需要更改图像以显示为块。将此添加到您的CSS样式...     img {display:block;}