So I’ve been doing a lot of web development lately and have run into some issues that have driven me nuts. The latest one had to do with an HTML email template I was creating. for HTML emails you have to use a lot of tables which is always fun. I had a table with columns and rows that had images in them. The img tags were putting in extra space below them. I was using the HTML 4 strict doc type. That was part of the problem. If I changed that it worked fine, but I wanted to use that particular doc type since it was for an email template. I’ve been able to fix problems like this before by just adding a br tag after the img tag, but that didn’t work with this doc type. The problem is due to how the img tag is displayed. It’s generally an inline element not block. So using CSS I changed the display to block:
img
{
display:block;
}
I overwrote the display for all of the img tags because that is what I needed, but you could do it on an individual (inline) basis.