Pourquoi la marge ne fonctionne-t-elle pas sur les divisions avec « display : table-cell ; » et comment puis-je ajouter un espacement ?

Margin Property Not Affecting Div with "display: table-cell;"

En HTML, nous pouvons rencontrer un scénario où éléments div avec « display: table-cell; » n'a pas l'espacement attendu introduit par la propriété margin.

Cause

La propriété margin est incompatible avec les éléments présentant des types d'affichage autres que légende de tableau, tableau ou table en ligne. Malheureusement, display: table-cell ne relève pas de ces exceptions.

Solution

Pour contourner cette limitation, envisagez d'utiliser la propriété border-spacing comme alternative. Cependant, il est crucial d'appliquer un border-spacing à un élément parent comportant une disposition display: table, accompagné d'un border-collapse : séparer.

HTML

<div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Copier après la connexion

&l t;/div>

CSS

.row {display:table-row;}<br>.cell {display:table-cell;padding:5px;border:1px solid black;}<br>

Avec cette configuration, vous peut ajouter un espacement entre les éléments div.

Marge horizontale et verticale Variations

De plus, la propriété border-spacing permet des valeurs de marge indépendantes le long des axes horizontal et vertical en spécifiant deux valeurs distinctes.

.../border-spacing:3px 5px;} /<em> 3px horizontalement, 5px verticalement </em>/<br>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!