Remove spacing between table cells and rows

Question

I m designing an HTML email template  which forces me to use tables  In the code below  I m having trouble  1  removing the spacing below the placeholder image and  2  removing the space between the image and the caption  Here s a screenshot of how it looks in Chrome 15 on OS X 10 6 8        lt  DOCTYPE HTML gt   lt html gt   lt head gt       lt title gt Email Template lt  title gt       lt meta http-equiv  content-type  content  text html charset utf-8    gt   lt  head gt   lt body gt       lt table style  border  1px solid  b50b32  margin  30px auto  width  600px  padding  0  border-spacing  none   cellspacing  0  cellpadding  0  gt           lt tr gt               lt td id  main  style  background-color   f2f2f2   gt                   lt h2 style  color   b50b32  font-family   Lucida Grande   Arial  sans-serif  font-size  22px  font-weight  normal  padding  15px  margin  25px 0  background-color   fff   gt Major headline goes here lt  h2 gt                   lt table class  main-story-image  style  float  left  width  180px  margin  0 25px 25px 25px   gt                       lt tr gt  lt td style  padding  0  border  1px solid red   gt  lt img src  placeholder jpg  width  180  height  130  style  border  none  margin  0  padding  0   alt  Placeholder    gt  lt  td gt  lt  tr gt                       lt tr gt  lt td style  padding  0  border  1px solid red   gt  lt p class  image-caption  style  background-color   bebebe  color   333  font-family   Lucida Grande   Arial  sans-serif  margin  0  padding  5px   gt Caption  lt  p gt  lt  td gt  lt  tr gt                   lt  table gt  lt  --  main-story-image-- gt                   lt p style  margin  0 50px 25px 25px   gt Lorem ipsum dolor sit amet  lt  p gt                   lt p gt  lt a href    gt Click here to read more  lt  a gt  lt  p gt                   lt div style  clear  both   gt  lt  div gt               lt  td gt  lt  --  main-- gt           lt  tr gt       lt  table gt   lt  body gt   lt  html gt    The red borders are there only to show the outlines of the cells  I don t want them there in the final version

User · Answer

Put display block on the css for the cell  and valign  top  that should do the trick

User · Answer

I had a similar problem  This helps me across main email clients  Add    attributes cellpadding  0   cellspacing  0  and border  0  to tables style border-collapse  collapse  to tables styles padding  0  margin  0  to each element and styles font-size  0px  line-height  0px  to each element which is empty

User · Answer

If the caption box is gray then you can try wrapping the image and the caption in a div with the same background color of gray---so a  div  tag before the  tr  tag   This will mask the gap because instead of being white  it will be gray and look like part of the gray caption

User · Answer

If you see table class it has border-spacing  2px  You could override table class in your css and set its border-spacing  0px important in table  I did it like   table         border-collapse  separate        white-space  normal        line-height  normal        font-weight  normal        font-size  medium        font-style  normal        color  -internal-quirk-inherit        text-align  start        border-spacing  0px important        font-variant  normal        It saved my day Hope it would be of help  Thanks

User · Answer

Nothing has worked  The solution for the issue is    lt style gt  table td       padding  0     lt  style gt

User · Answer

You have cellspacing  0  twice  try replacing the second one with cellpadding  0  instead

User · Answer

Hi as  andrew mentioned make cellpadding   0  you still might have some space as you are using table border 1

User · Answer

I had a similar problem and I solved it by  inline styling the td element as follows       lt td style  display  block   gt     This will work although its not the best practice  In my case I was working on a old template that had been styled using HTML tables

User · Answer

Used font-size 0 in parent TD which has the image

User · Answer

Add border-collapse  collapse into the style attribute value of the inner table element  You could alternatively add the attribute cellspacing 0 there  but then you would have a double border between the cells   I e     lt table class  main-story-image  style  float  left  width  180px  margin  0 25px 25px 25px  border-collapse  collapse  gt

User · Answer

It looks like the DOCTYPE is causing the image to display as an inline element  If I add display  block to the image  problem solved

[css] Remove spacing between table cells and rows

Examples related to css

Examples related to html-table

Examples related to html-email