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

Éviter les bordures dupliquées dans CSS

Lorsque des éléments adjacents avec des bordures sont placés les uns à côté des autres, un artefact visuel appelé « doubles bordures » peut se produire au carrefour frontalier. Pour éliminer cet effet indésirable, envisagez ces approches CSS :

Option 1 : Utilisation de la propriété Outline

Pour les situations où l'ordre des éléments est imprévisible, l'utilisation de la propriété outline peut empêche efficacement les doubles bordures :

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

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

Notez que le contour n'est pas pris en charge dans les anciens navigateurs (IE7 et versions antérieures).

Option 2 : Marges négatives avec bordures

Si vous préférez utiliser des bordures, utilisez des marges négatives pour compenser la double bordure :

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

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!