Do I need to use spacer images when coding HTML emails?

Question

I understand that HTML emails need to use really old school layouts - as per lots of other answers on SO (e.g. HTML email: tables or divs?, HTML Email using CSS).

Ho

Answer 1

If you keep your cells higher than 19px (the min default height of Outlook), you never need to use line-height, and a simple   works great. Example:

  

    

      top
    
  

  
    

       
    
  

  
    

      bottom
    
  
  

But, for vertical spacing, in most cases you can probably avoid doing that and add padding into the row above or below:

  

    

      top
    
  

  
    

      bottom
    
  

or like this, without padding:

  

    

      top
    
  

  
    

       

      bottom
    
  

Note on the last example I used  
instead of just
. This is because Outlook will collapse any line or cell that has no content in it. That is the same reason why the original example also has a   in the spacer cell. If you were to add multiple rows or padding underneath, it would look like this:

   

   

   

  bottom
  
 
  
 
  
 

There are a couple of benefits of the two options without the spacer cell. First is that it is quicker and contains less code. The second is that it renders more consistently when someone forwards your email out of Outlook. Outlook's fabulous MS Word engine wraps everything in

tags, which add an unavoidable gap between rows. Having one less row will keep your email closer to your original design.