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

Answer 2

I think the proper use of dl, dt and dd is not using ul li's within a dd, but instead use different dd's. It seems to me you are using a list within an element which is itself for listing.

<dl>
    <dt>Item 1</dt>
    <dd>Value 1</dd>
    <dt>Item 2</dt>
    <dd>
       &nbsp;
    </dd>
    <dt>Item 3</dt>
    <dd>Value 1</dd>
    <dd>Value 2</dd>
    <dd>Value 3</dd>
</dl>

For CSS you could use this:

DL {
PADDING: 0; MARGIN: 0; }
DT {
POSITION: relative; PADDING: 0; MARGIN: 0; TOP: 1.2em; LEFT: 0px; }
DD {
PADDING: 0; MARGIN: 0 0 0 5em; }

Answer 3

How's this?

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

Answer 4

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.