如何在列表项之间插入间距？

Question

嗨我想添加这两个块之间的空间：

我当前的显示几乎是正确的，但它们之间没有空格：

代码是

<div class="data-box">   
            <div class="personName"><strong>    
                1. Joey Tempest&nbsp;
             </strong></div> 
        <div class="otherDetails"></div> 

        <table border="0"><tr><td></td><td>Telefon</td><td></td></tr>
        <tr><td></td><td>Fax</td><td></td></tr>
        <tr><td></td><td>E-post</td><td></td></tr>
        <tr><td>Sverige                                           </td><td>Referens</td><td></td></tr>
        </table> 


    </div>  

    <div class="clear"></div>
    <div class="fl10"></div>



        <div class="data-box">   
            <div class="personName"><strong>    
                2. Tone Norum&nbsp;
             </strong></div> 
        <div class="otherDetails"></div> 

        <table border="0"><tr><td></td><td>Telefon</td><td></td></tr>
        <tr><td></td><td>Fax</td><td></td></tr>
        <tr><td></td><td>E-post</td><td></td></tr>
        <tr><td>Sverige                                           </td><td>Referens</td><td></td></tr>
        </table> 


    </div>

我只能插入<br>，然后会出现一个空格。这是一个好的解决方案吗？

Answer 1

不，添加<br />不是一个好的解决方案。 您应该为数据框div提供margin-bottom：

div.data-box{
    margin-bottom: 10px;
}

如果您需要最后一个div没有余量，您也可以定义它。

这是工作小提琴（抱歉没有设计，你没有指定css代码。） http://jsfiddle.net/DCuKm/1/

Answer 2

为你的divison增加保证金。

.data-box {
    margin-bottom: 10px;
}

Answer 3

我认为你想为data-box div添加一个下限。

即

div.data-box {
    margin-bottom: 5px;
}

这通常是比休息更好的解决方案，因为它更灵活。

请参阅：http://jsfiddle.net/6PZnC/