CSS: 在 dt/dd 对之间有间距/边距

Question

我有以下 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>

我想将其布局为(而不是将术语和定义放在一起的普通 dl):

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

这不是问题。问题是我想在每个术语/定义对之间添加一个边距。问题是定义的高度不同(它们的范围在 0 到 5 个列表项之间)，所以我不能在 dd 标签上应用相同的边距。

Answer 1

这个怎么样？

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