Diseño de tabla CSS: ¿por qué table-row no acepta un margen?

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

Mi pregunta es relativa a la línea marcada HEREen el CSS. Descubrí que las filas están demasiado cerca unas de otras, así que intenté agregar un margen inferior para separarlas. Desafortunadamente no funciona. Tengo que agregar los márgenes a las celdas de la tabla para separar las filas.

¿Cuál es la razón de este comportamiento?

Además, ¿está bien usar esta estrategia para realizar el diseño como lo estoy haciendo?

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

o hay una mejor estrategia?

Consulte el estándar CSS 2.1, sección 17.5.3. Cuando lo usa display:table-row, la altura del DIV está determinada únicamente por la altura de los table-cellelementos que contiene. Por lo tanto, el margen, el relleno y la altura de esos elementos no tienen ningún efecto.

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

¿Cómo es esto para una solución alternativa (usando una tabla real)?

table {
    border-collapse: collapse;
}

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

No es tan dinámico, ya que tienes que establecer explícitamente el color del borde (a menos que también haya una forma de evitarlo), pero esto es algo con lo que estoy experimentando en un proyecto propio.

Edite para incluir comentarios sobre transparent:

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

Lo más cercano que he visto sería establecer border-spacing: 0 30px;el contenedor div. Sin embargo, esto solo me deja espacio en el borde superior de la tabla, lo que anula el propósito, ya que querías margen inferior.

¿Ha intentado establecer el margen inferior en .row div, es decir, en sus "celdas"? Cuando trabaja con tablas HTML reales, tampoco puede establecer márgenes en filas, solo en celdas.

Hay una solución bastante simple para esto, los atributos border-spacingy border-collapseCSS funcionan display: table.

Puede usar lo siguiente para obtener relleno / márgenes en sus celdas.

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

Tenga en cuenta que tiene que tener

border-collapse: separate;

De lo contrario, no funcionará.

Violín

 .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 puede ser otra solucion

Agregue un espaciador entre dos elementos, luego hágalo invisible:

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

.spacer {
    visibility: hidden
}

Trabajos - Agregar espacio a la tabla

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

agregar una etiqueta br entre los divs funcionó. agregue la etiqueta br entre dos divs que son display: table-row en un padre con display: table