CSS: with spacing/margin between the dt/dd pairs

Question

I have the following html:

        
Item 1
        

            

                
Value 1
         


        

Answer 1

Is your 'Item 2' dd truly empty or does it have a   in it? If it is empty, it will be hard to get the dt/dd to line up correctly because the other dd's will have a height of 20px (for example) and the empty dd will have a height of 0.

Be careful with the margin-top, you will have to apply it to both the dt and dd.

I prefer to use padding on the bottom of the dd. It gives more consistent results.

dt {
    float: left;
    clear: left;
    width: 8em;
    }
 dd {
    margin: 0 0 0 9em;
     padding: 0 0 2.5em 0;
    }