Spacing between table rows in HTML mail template
Copy link to clipboard
Copied
I am trying to create a simple HTML mail in Dreamweaver so I started with one of the templates. I can't figure out why I have this spacing between my table rows. Padding, spacing, border-collapse etc. are all set up, but the problem perists. Anybody have an idea???
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#e0e0e0" style="border-collapse:collapse;">
Copy link to clipboard
Copied
We need to see your entire bit of code and also understand the email client you are troubleshooting. In most cases you are better off developing emails in an email platform as opposed to Dreamweaver as there are so many nuances in coding and development that you really have to keep things as simple as possible. Also, for the fact that some clients cannot read CSS from the head still. Here's a full guide I would reference to help with understanding what works/doesn't work in the many different clients https://www.campaignmonitor.com/css/
Copy link to clipboard
Copied
Email clients like Outlook have varying degrees of support for HTML and CSS. Many do not even support images.
Litmus has responsive email templates that have been industry tested to work with most major email clients and services like Gmail. Keep emails simple and start with one of these free templates.
https://litmus.com/community/templates
Copy link to clipboard
Copied
If there are images in your table cells, the default browser behavior is for them to be given room for text-descenders (for example, lower case j, y, g) so text doesn't overlap the container. This gives the appearance of a padding setting on the bottom between images and their parent containers, which could appear as table-cell padding in the right circumstance.
There are a bunch of ways to fix it, changing the images to display:block, or using vertical-align:bottom on the images will do the trick.
If that's the issue.
It's all guessing without seeing the entire code of the page though.

