1

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 -->
Dr Upvote
  • 8,023
  • 24
  • 91
  • 204
  • Can you share a bit more code? I'm wondering what the rest of the HTML looks like. Also, I'm sure you tried already, but I always try adjusting margin in HTML emails if padding isn't working for me – Mike Jul 16 '15 at 19:51
  • yes, margin is supposed to be worst!!!!!!!!!!! – Dr Upvote Jul 16 '15 at 19:58
  • http://stackoverflow.com/questions/8310609/css-styling-wont-work-in-outlook-2010 – caramba Jul 16 '15 at 20:09
  • Thanks @carambo but how do I achieve this in Outlook then? While also maintaining in gmail and mobile exchange – Dr Upvote Jul 16 '15 at 20:22

2 Answers2

3

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.

Gortonington
  • 3,557
  • 2
  • 18
  • 30
2

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

Dr Upvote
  • 8,023
  • 24
  • 91
  • 204
  • I have done your option B.) but when on Mobile it crunches the table cell causing this to be an unstable solution for 'Outlook, Mobile Exchange, and Gmail' support. I'll try your first option though. – Dr Upvote Jul 16 '15 at 20:23
  • Crunch it how? All adding a width to your image's wrapping cell will do is restrict that cell to a defined width. Shouldn't be much mishap here. Any way we can see your entire html code? –  Jul 16 '15 at 20:27
  • adding it to wrapper table cell; first suggestion worked – Dr Upvote Jul 16 '15 at 20:29
  • Brilliant, glad I could help! –  Jul 16 '15 at 20:30
  • Thanks, Lindsey Brohaan. – Dr Upvote Jul 16 '15 at 20:34