0

I have an image in a table element and there always seems to be a margin below the image. The minimal example below shows the problem.

<!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>                 
0

2 Answers 2

3

Add CSS style vertical-align: bottom; to your image, will do the trick. Unless you do not need the images to be display: inline-block; then use the answer from the previous user!

0

You need to change your images to display as blocks. Add this to your css style... img { display:block;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.