CSS: <DL> with spacing/margin between the dt/dd pairs

Question

I have the following html:

<dl>
        <dt>Item 1</dt>
        <dd>
            <ul>
                <li>Value 1</li>
            </ul>
        </dd>
        <dt>Item 2</dt>
        <dd>
            <!-- this item is missing a value -->
        </dd>
        <dt>Item 3</dt>
        <dd>
            <ul>
                <li>Value 1</li>
                <li>Value 2</li>
                <li>Value 3</li>
            </ul>
        </dd>
    </dl>

I would like to lay it out like (instead of the normal dl which puts the term and definitions under each other):

Item 1    Value 1
Item 2    
Item 3    Value 1
          Value 2
          Value 3

Which is not a problem. The problem is that I would like to add a margin between each term/definition pair. The problem is that the definitions are not the same height (they range between 0 up to 5 list items), so I cannot apply the same margin on the dd tags.

Answer 1

How's this?

dt, dd { display: block; float: left; margin-top: 20px; }
dt { clear: both; }

Answer 2

Do you mean something like:

Item 1    Value 1

Item 2    

Item 3    Value 1
          Value 2
          Value 3

Because then I don't see why you can't apply the margin on the dd elements. I did a quick experiment, using the following CSS:

ul { 
  margin: -1.2em 0 0 100px; 
  padding: 0; 
}

dd { 
  margin-bottom: 10px;
}

Which appears to have the effect you need.

Answer 3

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;
    }