Réduire les marges en CSS : guide du débutant-tutoriel CSS-php.cn

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

Barbara Streisand

Libérer： 2024-09-24 18:16:02

original

923 Les gens l'ont consulté

Collapsing Margins in CSS: A Beginner

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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; */
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
 }

Copier après la connexion

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;
 }

Copier après la connexion

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;
}

Copier après la connexion