Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Link padding HTML email

I have table with this markup:

<tr id="main_nav">
    <td style="width: 100%" colspan="2">
        <a>Link1</a>
        <a>Link2</a>
        <a>Link3</a>                            
    </td>
</tr>

I need to set padding to these links, but I can't make it to work... CSS:

#main_nav a {
    color: #fff;
    font-weight: bold;  
    padding-left: 1em;
}

What I've tried: wrap link into p tag, span tag, add css display block, display table, add style with padding to link. Can not wrap each link in <td> tag!

Edit: Tried margin instead of padding, no luck.

like image 462
Morpheus Avatar asked Dec 11 '12 08:12

Morpheus


People also ask

Can I use padding in HTML email?

Margins and HTML email padding go a long way to ensure a smooth user experience within an email. They allow different creative elements and email content to breathe and flow seamlessly, without making the message feel too cramped.

How do you add padding in HTML code?

Single value: Example like div{padding:12px}-all the four sides of the HTML contents will have a padding value like 12 px. Two values: div{padding:12px 13px}-the top and bottom padding will be the 12px,the left and right paddings will be 13px.


2 Answers

I successfully get around this issue by setting a large border to the same colour as the background.

border: 10px solid #fff;
like image 133
Mike Poole Avatar answered Oct 18 '22 15:10

Mike Poole


Put <a>Link1</a> within a div, then set the div padding.

If it still doesn't work, try to change the width of the divs, like here: http://jsfiddle.net/XWLv6/1/

like image 24
ParPar Avatar answered Oct 18 '22 14:10

ParPar