CODEWITHSUNDEEP
htmloutlookhtml-email
Lieutenant Dan
Lieutenant Dan

Reputation: 8284

padding-right: 20px; to an image in outlook email

This works on Gmail and Mobile Exchange but NOT outlook 2010 (though padding is supposed to work in 2010?).

<img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo" style="display:block;padding-right:20px;">

With or without the display block the above is completely ignored in outlook. And just results with the text next to it, mashing right into the side of the image. Again, resolves great in Gmail and Mobile Exchange.

I have text to the right of this image, so the use of: &nbsp; is a very messy option. Any other similar ideas? (similar = works most places)

Update for @Mike "bit more code" below:

<tr style="height: 50px; font-size:12px;">
        <td><img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo" style="display:block;padding-right:20px;"></td>
        <td style="color: #002953; max-height: 20px;">
            <span style="font-size:12px !important; font-weight: bolder;">
            This one time at band camp Lorem Ipsum</span><br>
            <span style="font-weight: bolder;font-size:12px !important;">Jeepers HTML emails suck lorem ipsum<br>
            </span>
            <br>
            <!-- etc -->

Upvotes: 1

Views: 9733

Answers (2)

Gortonington
Gortonington

Reputation: 3587

Use padding on td tags in outlook. Padding is not supported on Img or div tags. Check out http://www.campaignmonitor/css to see more about CSS compatibility across email clients.

Upvotes: 3

user2958788
user2958788

Reputation:

Padding is supported in Outlook, no matter what people tell you. It just depends on where you define it. I would advise against putting padding on an image. Remember Padding is inside an element, Margin is outside of an element, so in this case you're better adding it to the wrapping table cell of your image.

You also have another option here which is to give your wrapping table cell a width. This width should equal the width of the image + 20px to account for your padding. Then you have no need for padding. Obviously this only works if you have a clearly defined width to work width which you haven't from what I can see in your HTML. If your element will always be one width, add the width to the Image tag. This way the second Table cell with the text will take up the rest of the available space in that table and always be 20px to the right of your image

Upvotes: 2

Related Questions