If you have set an align attribute in an image to right or left, Thunderbird will add a 3 pixel margin these images.
When using align=”right” Thunderbird will add a 3px margin to the left of the image, where using align=”left” Thunderbird adds a 3ps margin to the right of the image.
To fix this issue, you can either remove the align attribute or using CSS add margin:0; to each image with an align attribute.
HTML
<img src="http://www.htmlemailcheck.com/assets/img/og-logo.png" width="500" height="300" align="right" style="margin:0;">
3 Comments
How do you add the CSS code to the image? Please provide precise step-by-step instructions from within the Thunderbird Write window. Thanks.
Hello Groucho,
The following methods allow you to style the image using CSS while composing an email in Thunderbird.
Method 1: Using the Image Properties Dialog
1. Open Thunderbird and click Write to compose a new email.
2. Insert the Image:
– Click inside the email body where you want the image.
– Go to Insert > Image (or press Ctrl + Shift + I).
– Select your image file and check “Attach this image to the message” if needed.
– Click OK to insert the image.
3. Open Image Properties:
– Right-click the inserted image and select Image Properties.
4. Apply CSS Styles:
– In the “Dimensions” tab, adjust the width/height if necessary.
– Switch to the “Advanced Edit” tab.
– Click Add Property.
– Set Attribute to “style” (without quotes).
– In the Value field, enter your CSS styles (e.g., border: 2px solid red; margin: 10px;).
– Click OK to apply.
Method 2: Editing HTML Source Directly
1. Enable HTML Editing:![]()
tag related to your image.
– Click inside the email body.
– Go to Insert > HTML (or press Ctrl + U).
2. Locate the Image Tag:
– Find the
3. Add CSS Styles Inline:
– Modify the img tag to include a style attribute.
– Example: img src=”http://www.htmlemailcheck.com/assets/img/og-logo.png” width=”500″ height=”300″ align=”right” style=”margin:0;”
4. Click Insert to apply changes.
I hope this helps!
Kind Regards,
David
Thanks, David. In Method 1, when I right click on the inserted image, there is no Image Properties option in the menu that opens. In Method 2, I have no idea how to find the image tag. If I click on the image and then Insert > HTML and insert the HTML code in your example after the existing HTML code nothing happens. If I replace the existing HTML code with the code in your example the image disappears altogether and your code is displayed. Your further assistance will be appreciated.