Mise en page des tableaux CSS : pourquoi table-row n'accepte-t-il pas de marge ?

Question

.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 porte sur la ligne marquée HERE dans le CSS. Je me suis rendu compte que les lignes étaient trop proches les unes des autres, et j'ai donc essayé d'ajouter une marge inférieure pour les séparer. Malheureusement, cela ne fonctionne pas. Je dois ajouter les marges aux cellules du tableau pour séparer les lignes.

Quelle est la raison de ce comportement ?

Par ailleurs, est-il possible d'utiliser cette stratégie pour effectuer une mise en page comme je le fais :

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

ou existe-t-il une meilleure stratégie ?

Answer 1

Voir la norme CSS 2.1, section 17.5.3. Lorsque vous utilisez display:table-row la hauteur de la DIV est uniquement déterminée par la hauteur de la DIV. table-cell en son sein. Ainsi, la marge, l'espacement et la hauteur de ces éléments n'ont aucun effet.

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

Answer 2

Que diriez-vous d'une solution de contournement (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, puisqu'il faut définir explicitement la couleur de la bordure (à moins qu'il n'y ait un moyen de contourner ce problème), mais c'est quelque chose que je suis en train d'expérimenter dans le cadre d'un projet qui m'est propre.

Editar d'inclure des commentaires concernant transparent :

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

Answer 3

La solution la plus proche que j'ai vue consisterait à mettre en place border-spacing: 0 30px; à la div du conteneur. Cependant, cela me laisse de l'espace sur le bord supérieur du tableau, ce qui va à l'encontre de l'objectif, puisque vous vouliez margin-bottom.

Answer 4

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

Answer 5

Il existe une solution assez simple pour remédier à ce problème, la fonction border-spacing y border-collapse Les attributs CSS fonctionnent sur display: table .

Vous pouvez utiliser la méthode suivante pour obtenir 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 avoir d'avoir

border-collapse: separate;

Sinon, il ne fonctionnera pas.