How to eliminate white space in table row?

Question

I have a table with an image in the middle of it. But there is a small sliver of white space between the bottom of the image and the rest of the table rows. How do I get rid of that white space?

Code:

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<html>
<head>
</head>
<body>

  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="21">&nbsp;</td>
                                            <td>
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="17" width="204" valign="top" bgcolor="#971502" background="http://quarterpoker.com/images/welcome_email/content-bg.jpg" style="border: solid 1px #d3594e; 
                    -webkit-border-top-left-radius: 8px;
                    -khtml-border-radius-topleft: 8px;  
                    -moz-border-radius-topleft: 8px;
                    border-top-left-radius: 8px;
                    -webkit-border-top-right-radius: 8px;
                    -khtml-border-radius-topright: 8px; 
                    -moz-border-radius-topright: 8px;
                    border-top-right-radius: 8px;
                    border-bottom: none;"> </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19">&nbsp;</td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="38" align="center">
                                                <table width="170" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td valign="top" height="38">
                                                            <img src="http://quarterpoker.com/images/welcome_email/ribbon.jpg"/>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="20">&nbsp;</td>
                                            <td>
                                                <table width="100%" border="0" cellpadding="20" cellspacing="0">
                                                    <tr>
                                                        <td width="204" valign="top" bgcolor="#971502" background="http://quarterpoker.com/images/welcome_email/content-bg.jpg" style="margin-top: -5px;border: solid 1px #d3594e; 
                    -webkit-border-bottom-left-radius: 8px;
                    -khtml-border-radius-bottomleft: 8px;   
                    -moz-border-radius-bottomleft: 8px;
                    border-bottom-left-radius: 8px;
                    -webkit-border-bottom-right-radius: 8px;
                    -khtml-border-radius-bottomright: 8px;  
                    -moz-border-radius-bottomright: 8px;
                    border-bottom-right-radius: 8px;
                    border-top: none;">
                                                           <repeater>
                                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                    <tr>
                                                                        <td class="side">
                                                                            <p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin-top: 0px; margin-bottom: 12px; padding: 0px; color: #fff ">To ensure you receive all of our email messages in your inbox and with images displayed, please add our email address to your contact list.</p>
                                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                <tr>
                                                                                    <td valign="middle" height="30"> <img src="http://quarterpoker.com/images/welcome_email/line3.png" width="144" height="10" /></td>
                                                                                </tr>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </repeater>
                                                            <ul style="padding: 0; margin: 0; list-style: none;">
                                                            <tableofcontents>
                                                                <li><repeatertitle /></li>
                                                            </tableofcontents>
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19">&nbsp;</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                        </body>
                        </html>

I have tried changing the height, deleting rows, nothing seems to work. Any help would be greatly appreciated!

possible duplicate of [Space at bottom of div containing image](http://stackoverflow.com/questions/11868905/space-at-bottom-of-div-containing-image) — cimmanon, Jul 02 '13 at 14:58

score 1 · Answer 1 · answered Jul 02 '13 at 14:59

1

set the img to display: block. or vertical-align: middle

answered Jul 02 '13 at 14:59

kalley

18,072
2
39
36

Hey, thanks so much, this fixed the problem! It works great in a browser, but when I send it as an email, now there is a sliver of white space ABOVE the image? Any idea of how to get rid of this as well? – Alex Jul 02 '13 at 15:09
1

not exactly sure. But for HTML emails, you should make sure to specify width and height on an image whenever possible. Sometimes Outlook will stretch it if it doesn't know the dimensions. No guarantee that solves the problem though. – kalley Jul 02 '13 at 15:22
Add `style="margin: 0; border: 0; padding: 0; display: block;"` to your image tag for email. If it is the only thing in your ``, it will remove all white space. @Alex – John Mar 24 '14 at 22:20

score 0 · Answer 2 · answered Jul 02 '13 at 15:01

0

img {vertical-align:top; /* or bottom*/}

Why ? Image stands on baseline, just like text, so there that gap underneath for letters like : p,f,g ...

answered Jul 02 '13 at 15:01

G-Cyrillus

101,410
14
105
129

RbG · Answer 3 · 2013-07-02T15:55:07.713

0

you can try margin:0; and display: block; for that column where you are holding that picture;

edited Jul 02 '13 at 15:55

answered Jul 02 '13 at 15:49

RbG

3,181
3
32
43

How to eliminate white space in table row?

3 Answers3