How do I remove space between table rows when sending as an email?

Question

I have an HTML markup which is send as an email to the user that subscribe to the site. User enters their email id and on click of a button design is sent to the user as an email.

HTML markup for the view file is:

<table style="margin: auto;
    background: lightgray;width: 500px;border-spacing: unset;">
        <tbody>
            <tr>
                <td>

                <img src="https://cetra.in/Images/logo.png" /></td>
                <td align="center" colspan="2">  <h1 style="margin: auto;">Cetra Business Travel<h1></td>
</tr>
<tr>
    <td colspan="3" align="center"><img src="https://cetra.in/Images/subscribe.png" style="height: 300px;width: 500px;" /> </td>
</tr>
<tr style="background: #ffcf3d;" ><td colspan="3" style="width: 10px;padding-top: 45px;padding-bottom: 45px;">
<p style="text-align: center;
    font-size: 25px;padding: 0px 50px;">
                Thank you for subscribing. We are delighted to have you.Thank you for subscribing. We are delighted to
                have you Thank you for subscribing. We are delighted to have you
            </p>
</td></tr>
<tr style="background: white;">
    <td colspan="3" align="center" style="padding-bottom: 45px;padding-top: 45px"><button type="button" style="color: white;
    height: 53px;
    background: black;
    font-size: 30px;
    padding: 10px;
    border-radius: 60px;
    border: none;
    ">Read More</button></td>
</tr>
<tr style="background: white;">



<td align="center">
<span>

<a style="color:white" href="https://www.facebook.com/pg/cetrabusinesstravel/about/">    
<img src="https://cetra.in/Images/facebook_logo2.png" style="height:50px;width:50px"/></a></span>
</td>
<td align="center"><span>
<a style="color:white" href="https://twitter.com/cetrabiztravel?lang=en">    
<img src="https://cetra.in/Images/twitter_logo.png" style="height:50px;width:50px"/></a></span></td>
<td align="center"><span>
<a style="color:white" href="https://in.linkedin.com/company/cetrabusinesstravel">
    <img src="https://cetra.in/Images/linkedIn_logo.png" style="height:50px;width:50px"/>
</a></span></td>
        </tr>

        <tr style="background: white;">
            <td colspan="3" align="center">
                <p>Cetra Business Travel</p>
            </td>
        </tr>
        <tr style="background: white;">
            <td colspan="3" align="center"><p>
                            E 1202 Titanium City Center , Anand nagar road

                            prahladnagar

                            Ahmedabad, Gujarat 380015, IN
                        </p></td>
        </tr>

        <tr style="background: white;">
    <td align="center" colspan="3"> <a href="cetra.in">Cetra Hospitality</a>  
            <a href='cetra.in/user_unsubscribe/<?php echo $id ?> '> Unsubscribe</a></td>
</tr>

</tbody>
</table>

The variable message in the controler contains HTML markup from this view. It works just fine when it is viewed in the localhost but when that same file is sent as a message it shows some gap between the image and the text which are in two different .

How do I remove this gap between the image and text?

I tried increasing size of image but it increases size of whole design with the gap between image and text kept intact. But yes the idea of making the row background white really works. Thanks for that — Bhaumik Bhatt, Sep 30 '19 at 06:04
putting display block messes with the design and make the image smaller instead of keeping its colspan to 3. — Bhaumik Bhatt, Sep 30 '19 at 06:07
Your `
` is missing a closing tag. In that case, instead of `display: block` put `vertical-align: middle`. By default, images are inline with `vertical-align: baseline` which leaves a gap underneath for characters that go underneath the baseline like "g", "j" or "p". — misterManSam, Sep 30 '19 at 06:10
I have not tried vertical -align. There are two solutions that are working in my case. Turning the background to white and display:block — Bhaumik Bhatt, Sep 30 '19 at 06:17
Nice one! I have marked this question as a duplicate as it has been asked before and is answered. — misterManSam, Sep 30 '19 at 06:19
I had no knowledge about that question. Besides my problem was the design getting changed in the email only and not in the localserver. — Bhaumik Bhatt, Sep 30 '19 at 06:20
https://jsfiddle.net/70kph2fv/1/, its working fine, use display:block to img — G.L.P, Sep 30 '19 at 06:24

score 0 · Accepted Answer · answered Sep 30 '19 at 05:59

0

Look like image leaving some space add display:block to image.

answered Sep 30 '19 at 05:59

Sumit Patel

4,530
1
10
28

How do I remove space between table rows when sending as an email?

` is missing a closing tag. In that case, instead of `display: block` put `vertical-align: middle`. By default, images are inline with `vertical-align: baseline` which leaves a gap underneath for characters that go underneath the baseline like "g", "j" or "p".

1 Answers1