<style>
.container {
    width: 850px;
    padding:0;
    display: table;
    margin-left: auto;
    margin-right: auto;
}
.row  {
    display: table-row;
    margin-bottom: 30px; /* HERE */
}
.home_1 {
    width:64px;
    height: 64px;
    padding-right: 20px;
    margin-right: 10px;
    display: table-cell;
}
.home_2 {
    width:350px;
    height: 64px;
    padding: 0px;
    vertical-align: middle;
    font-size: 150%;
    display: table-cell;
}
.home_3 {
    width:64px;
    height: 64px;
    padding-right: 20px;
    margin-right: 10px;
    display: table-cell;
}
.home_4 {
    width: 350px;
    height: 64px;
    padding: 0px;
    vertical-align: middle;
    font-size: 150%;
    display: table-cell;
}
</style>

Ve aşağıdaki html

<div class="container">
    <div class="row">
        <div class="home_1"></div>
        <div class="home_2"></div>
        <div class="home_3"></div>
        <div class="home_4"></div>
    </div>

   <div class="row">
       <div class="home_1"></div>
       <div class="home_2"></div>
   </div>
</div>

benim sorum şu çizgiler CSS belirgin göredir. Satırlar onları ayırmak için alt kenar boşluğu eklemek için çalıştım bu yüzden birbirine çok yakın olduğunu öğrendim. Ne yazık ki çalışmıyor. Tablo hücrelerinin kenar boşlukları eklemek için satırları ayırmak için var.

Bu davranışın arkasında yatan sebep nedir ?

Ayrıca, bu strateji, benim yaptığım gibi: layouting gerçekleştirmek için kullanmak için ok

[icon] - text      [icon] - text
[icon] - text      [icon] - text

yoksa daha iyi bir strateji midir ?

CSS 2.1 standardı, bölüm 17.5.3 bakın. display:table-row, kullandığınızda DİV yüksekliği sadece içinde table-cell elementler yüksekliği ile belirlenir. Böylece, kenar boşluğu doldurma ve bu öğeler üzerinde yüksekliği hiçbir etkisi yoktur.

http://www.w3.org/TR/CSS2/tables.html