html - リストアイテムの間にスペースを挿入するにはどうすればよいですか？

Question

こんにちは私はこれらの2つのブロックの間に私が持っているスペースを追加したいと思います：

私の現在の表示はほぼ正しいですが、ブロック間にスペースがありません。

コードは

<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

あなたの部門にマージンを追加します。

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

Answer 3

divにボトムマージンを追加したいと思いますdata-box。

すなわち

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

これは、柔軟性が高いため、一般的に休憩よりも優れたソリューションです。

参照： http： //jsfiddle.net/6PZnC/