Comment éviter les doubles bordures en CSS : contour ou marges négatives ?

Éviter les bordures "doubles" en CSS

Lorsque deux éléments adjacents avec des bordures sont placés côte à côte, il peut apparaître comme s'ils avaient une double bordure au carrefour où ils se rencontrent. Pour éviter cet artefact visuel, envisagez les techniques CSS suivantes :

Utiliser le contour au lieu des bordures

Pour les éléments qui peuvent apparaître dans n'importe quel ordre, la propriété outline fournit un outil fiable solution :

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid;
  margin-top: 1px;
  margin-left: 1px;
}</code>

Marges négatives

Alternativement, l'utilisation de marges négatives sur les éléments enfants "effacera" efficacement la double bordure :

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}</code>

Remarque pour les anciens navigateurs

La propriété outline n'est pas prise en charge dans les navigateurs plus anciens tels que IE7 et versions antérieures. Dans ces cas, l’approche de marge négative est recommandée.

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!