Mise en page du tableau CSS: pourquoi le tableau-ligne n'accepte-t-il pas de marge?

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

Ma question est relative à la ligne marquée HEREdans le CSS. J'ai découvert que les lignes étaient trop proches les unes des autres, j'ai donc essayé d'ajouter une marge inférieure pour les séparer. Malheureusement ça ne marche pas. Je dois ajouter les marges aux cellules du tableau pour séparer les lignes.

Quelle est la raison de ce comportement?

Est-il également acceptable d'utiliser cette stratégie pour effectuer la mise en page comme je le fais:

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

ou y a-t-il une meilleure stratégie?

Voir la norme CSS 2.1, section 17.5.3. Lorsque vous utilisez display:table-row, la hauteur du DIV est uniquement déterminée par la hauteur des table-celléléments qu'il contient. Ainsi, la marge, le remplissage et la hauteur de ces éléments n'ont aucun effet.

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

Comment est-ce pour un travail autour (en utilisant une table réelle)?

table {
    border-collapse: collapse;
}

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

Ce n'est pas aussi dynamique, car vous devez définir explicitement la couleur de la bordure (à moins qu'il n'y ait aussi un moyen de contourner cela), mais c'est quelque chose que j'expérimente sur un projet de mon propre chef.

Modifier pour inclure des commentaires concernant transparent:

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

La chose la plus proche que j'ai vue serait de définir border-spacing: 0 30px;le conteneur div. Cependant, cela me laisse juste un espace sur le bord supérieur de la table, ce qui va à l'encontre de l'objectif, puisque vous vouliez une marge en bas.

Avez-vous essayé de régler la marge du bas sur .row div, c'est-à-dire sur vos "cellules"? Lorsque vous travaillez avec des tableaux HTML réels, vous ne pouvez pas non plus définir de marges sur des lignes, mais uniquement sur des cellules.

Il existe une solution assez simple pour cela, les attributs border-spacinget border-collapseCSS fonctionnent display: table.

Vous pouvez utiliser ce qui suit pour obtenir un remplissage / des marges dans vos cellules.

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

Notez que vous devez avoir

border-collapse: separate;

Sinon, cela ne fonctionnera pas.

Violon

 .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

cela peut être une autre solution

Ajoutez un espacement entre deux éléments, puis rendez-le invisible:

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

.spacer {
    visibility: hidden
}

Works - Ajouter un espacement à la table

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

l'ajout d'une balise br entre les divs a travaillé. ajouter une balise br entre deux divs qui sont display: table-row dans un parent avec display: table