Pourquoi un div avec "display: table-cell;" pas affecté par la marge?

211

J'ai des divéléments côte à côte avec display: table-cell;.

Je veux m'installer marginentre eux, mais margin: 5pxn'a aucun effet. Pourquoi?

Mon code:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

html css

— user1929946
source

310

Cause

De la documentation MDN :

[La propriété margin] s'applique à tous les éléments sauf les éléments avec des types d'affichage de table autres que table-caption, table et inline-table

En d'autres termes, la marginpropriété n'est pas applicable aux display:table-celléléments.

Solution

Envisagez border-spacingplutôt d' utiliser la propriété.

Notez qu'il doit être appliqué à un élément parent avec une display:tabledisposition et border-collapse:separate.

Par exemple:

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

Voir la démo jsFiddle

Marge différente horizontalement et verticalement

Comme mentionné par Diego Quirós, la border-spacingpropriété accepte également deux valeurs pour définir une marge différente pour les axes horizontal et vertical.

Par exemple

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

— Boaz
source

6

Merci! Il y a aussi cette notation dans le cas où l'espace horizontal et vertical doit être différent de l'espacement des frontières: horizontal vertical;

— Diego Quirós

Et je pensais avoir trouvé un bug; se révèle que je dois en savoir plus CSS.

— Pete Alvin

Je suppose que cela ne gère pas vraiment les marges gauche / droite / haut / bas spécifiques? Et aucun moyen d'avoir une cellule de tableau spécifique avec un rembourrage différent des autres?

— Nathan

@Nathan paddingpeut être défini pour tout sélecteur nécessaire (par exemple, classe ou id), comme d'habitude. Si vous voulez dire marginentre les cellules, cela peut être défini séparément pour les axes vertical et horizontal en définissant deux valeurs sur border-spacing, mais cela s'appliquera à l'ensemble du tableau et non aux cellules individuelles.

— Boaz

21

Vous pouvez utiliser des divisions internes pour définir la marge.

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

JS Fiddle

— urmurmur
source

2

C'est une bonne idée si vous voulez une marge entre les cellules mais pas à gauche ni à droite. Ensuite, votre CSS pourrait ressembler à quelque chose .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Mais notez également ce problème: les arrière-plans rouge et vert de cet exemple ne correspondent pas nécessairement en hauteur car ils ne sont pas sur les cellules.

— Henrik N

8

Les cellules du tableau ne respectent pas la marge, mais vous pouvez utiliser des bordures transparentes à la place:

div {
  display: table-cell;
  border: 5px solid transparent;
}

Remarque: vous ne pouvez pas utiliser de pourcentages ici ... :(

— Chris Happy
source

2

Si vous avez div les uns à côté des autres comme ça

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

Cela devrait fonctionner!

— user123_456
source

10

D'accord, mais s'il veut deux divs de même hauteur? Float ne peut pas faire ça.

— hieroshima

Et c'est pourquoi JS est génial :)

— Chris Happy

@ChrisHappy N'utilisez jamais JavaScript, lorsqu'il existe une solution CSS. Votre code devient simplement volumineux.

— ssc-hrep3

@ ssc-hrep3 Comme la réactivité vient à la demande, les solutions CSS volumineuses ne suffisent plus ...

— Chris Happy

2

Ils sont suffisants - en particulier avec des exigences réactives. Jetez un coup d'œil à Flexbox, qui est maintenant pris en charge par la plupart des principaux navigateurs et résout ce problème très facilement. Les styles de mise en page ne doivent jamais être effectués par JavaScript.

— ssc-hrep3