Layout da tabela CSS: por que a linha da tabela não aceita margem?

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

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

Minha dúvida é em relação à linha marcada HEREno CSS. Descobri que as linhas estão muito próximas umas das outras, então tentei adicionar uma margem inferior para separá-las. Infelizmente isso não funciona. Tenho que adicionar as margens às células da tabela para separar as linhas.

Qual é a razão por trás desse comportamento?

Além disso, não há problema em usar essa estratégia para fazer o layout como estou fazendo:

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

ou existe uma estratégia melhor?

Consulte o padrão CSS 2.1, seção 17.5.3. Quando você usa display:table-row, a altura do DIV é exclusivamente determinada pela altura dos table-cellelementos nele. Portanto, a margem, o preenchimento e a altura desses elementos não têm efeito.

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

Que tal uma solução alternativa (usando uma tabela real)?

table {
    border-collapse: collapse;
}

tr.row {
    border-bottom: solid white 30px; /* change "white" to your background color */
}

Não é tão dinâmico, já que você precisa definir explicitamente a cor da borda (a menos que haja uma maneira de contornar isso também), mas isso é algo que estou experimentando em um projeto meu.

Edite para incluir comentários sobre transparent:

tr.row {
    border-bottom: 30px solid transparent;
}

A coisa mais próxima que vi seria definir border-spacing: 0 30px;para o div do contêiner. No entanto, isso apenas me deixa com espaço na borda superior da tabela, o que vai contra o propósito, já que você queria a margem inferior.

Você tentou definir a margem inferior para .row div, ou seja, para suas "células"? Quando você trabalha com tabelas HTML reais, não pode definir margens para linhas também - apenas para células.

Há uma solução bem simples para isso, os atributos border-spacinge border-collapseCSS funcionam display: table.

Você pode usar o seguinte para obter preenchimento / margens em suas células.

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 15px;
}

.row {
  display: table-row;
}

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

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

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

Note que você tem que ter

border-collapse: separate;

Caso contrário, não funcionará.

Violino

 .row-seperator{
   border-top: solid transparent 50px;
 }

<table>
   <tr><td>Section 1</td></tr>
   <tr><td>row1 1</td></tr>
   <tr><td>row1 2</td></tr>
   <tr>
      <td class="row-seperator">Section 2</td>
   </tr>
   <tr><td>row2 1</td></tr>
   <tr><td>row2 2</td></tr>
</table>


#Outline
Section 1
row1 1
row1 2


Section 2
row2 1
row2 2

esta pode ser outra solução

Adicione um espaçador entre dois elementos e torne-o invisível:

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

Obras - Adicionar Espaçamento à Tabela

#options table {
  border-spacing: 8px;
}

adicionar uma tag br entre os divs funcionou. adicione a tag br entre dois divs que são display: table-row em um pai com display: table