Voici quelques titres basés sur des questions qui correspondent au contenu de votre article : * Doubles bordures en CSS : comment éviter les effets indésirables ? * Problèmes de mise en page CSS : gérer les doubles frontières entre les divisions adjacentes *

Éviter les doubles bordures en CSS

Lorsque des div adjacents avec des bordures sont placés côte à côte, ils peuvent créer un effet de double bordure indésirable à leur intersection. Cela peut être particulièrement déconcertant dans des mises en page telles que celle de la page d'accueil du Chrome Web Store.

Pour résoudre ce problème, envisagez les astuces CSS suivantes :

Astuce de contour

En appliquant un contour au lieu d'une bordure pour les éléments enfants (divs) et en ajustant leurs marges en conséquence, vous pouvez obtenir l'effet souhaité :

.collection {
    /* optional styles */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid;
    margin-top: 1px;
    margin-left: 1px;
}

Notez que le contour n'est pas pris en charge par les navigateurs antérieurs à IE8.

Astuce de bordure et de marge négative

Une autre option consiste à utiliser des bordures sur les éléments enfants et à appliquer des marges négatives pour contrecarrer les largeurs de bordure :

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

L'une ou l'autre de ces méthodes empêche efficacement le double l'apparence des bordures en les superposant ou en les décalant. Le choix de la technique peut dépendre de la prise en charge du navigateur et des exigences spécifiques du projet.

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!