Réduire les marges en CSS : guide du débutant

Introduction

Il n'y a rien de plus frustrant que d'appliquer un style et qu'il ne fonctionne pas comme prévu. L'effondrement de la marge est un phénomène qui entraîne des résultats de style inattendus. Alors, qu'est-ce qu'une marge qui s'effondre et comment affecte-t-elle les marges en CSS ?

Effondrement de la marge

Les marges de réduction proviennent de la propriété CSS margin, qui contrôle l'espacement à l'extérieur d'un élément. Comme son nom l'indique, l'effondrement des marges se produit lorsque les marges d'éléments adjacents se combinent ou « s'effondrent » en une seule, plutôt que de s'additionner. Cela se produit généralement entre des éléments frères ou entre un élément parent et enfant. Par exemple, si deux éléments frères ont des marges (l'un avec une marge inférieure de 20 px et l'autre avec une marge supérieure de 30 px), vous pouvez vous attendre à ce que la marge totale soit de 50 px. Cependant, en raison de la réduction des marges, seule la plus grande marge de 30 px sera appliquée et la plus petite marge de 20 px sera réduite.

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 30px;
}

De plus, dans les cas où un élément parent manque de remplissage ou de bordure et que son élément enfant possède une marge supérieure, la marge peut « s'effondrer » au-delà du parent, impactant ainsi le placement du parent.

.parent {
    margin-top: 0;
}
.child {
    margin-top: 20px;
}

La marge supérieure de 20 px du .child peut s'effondrer en dehors du .parent, déplaçant l'ensemble du parent vers le bas de 20 px.

Cela peut dérouter les développeurs novices (enfin, je n'en ai jamais eu connaissance jusqu'à récemment), car l'espacement résultant peut ne pas correspondre à leurs attentes.

Façons de contourner ce problème

• Ajouter un remplissage ou une bordure : l'ajout d'une petite quantité de remplissage ou d'une bordure à l'élément parent empêchera l'effondrement de la marge.

.parent {
    padding-top: 1px; /* or border-top: 1px solid transparent; */
}

• Utilisation de la propriété overflow : lorsque la propriété overflow du parent est définie sur autre chose que visible (par exemple, overflow: Hidden ;), elle peut empêcher l'effondrement de la marge.

.parent {
    overflow: hidden;
}

• Utilisez les mises en page Flexbox ou Grid : ces méthodes de mise en page évitent les problèmes de réduction des marges de par leur conception.

Exemple de Flexbox :

.parent {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
    border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    margin: 20px 0; /* Vertical margins that won't collapse */
    background-color: lightblue;
}

Exemple de grille

.parent {
   display: grid; /* Grid layout */
   grid-template-rows: auto auto; /* Define two rows */
   border: 1px solid #000; /* Just for visibility */
 }

.child1, .child2 {
     margin: 20px 0; /* Vertical margins */
     background-color: lightgreen;
 }

• Utilisez Float ou Inline-Block : faites flotter l'élément enfant ou configurez-le pour qu'il affiche : inline-block ; cela empêchera également les marges de s’effondrer. Cependant, je vois rarement float mais c'est bon à savoir en cas de base de code héritée.

Exemple de flotteur :

.parent {
    border: 1px solid #000; /* Just for visibility */
 }

 .child1, .child2 {
     float: left; /* Prevents margin collapsing */
     width: 100%; /* Full width */
     margin: 20px 0; /* Vertical margins */
     background-color: lightcoral;
 }

Exemple de bloc en ligne

.parent {
   border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    display: inline-block; /* Prevents margin collapsing */
    width: 100%; /* Full width */
    margin: 20px 0; /* Vertical margins */
    background-color: lightyellow;
}

Conclusion

Comprendre la réduction des marges peut contribuer de manière significative à un espacement cohérent et attendu dans votre mise en page Web, en particulier lorsque vous travaillez avec des éléments au niveau des blocs. Il convient de noter que les éléments en ligne tels que , , , etc. ne sont généralement pas affectés par la réduction des marges en raison de leur comportement distinct dans la génération de marges verticales par rapport aux éléments au niveau du bloc. La réduction des marges pose principalement des problèmes avec les éléments au niveau du bloc, tels que

,

,

et autres, car ils peuvent avoir des marges verticales qui interagissent les unes avec les autres.

Références

• Mdn
• w3Schools

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!

css Float if for Property this display overflow margin padding border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn