En quoi la réduction des marges diffère-t-elle entre le CSS traditionnel et Flexbox ?

Réduction des marges dans Flexbox

En CSS traditionnel, lorsqu'un élément parent et son dernier enfant ont tous deux des marges, celles-ci se réduisent en une seule marge. Cependant, lors de l'utilisation de Flexbox, ce comportement de réduction change.

Dans Flexbox, les éléments sont alignés dans un conteneur flex à l'aide de la propriété display: flex. Cela crée un contexte de formatage flexible, qui diffère d'un contexte de formatage de bloc en termes de réduction des marges.

Dans un contexte de formatage de bloc, les marges se réduisent comme suit :

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 20px margin between the last article and footer -->

Cependant, dans un contexte de formatage flexible, les marges ne s'effondrent pas :

#container {
  display: flex;
  flex-direction: column;
}

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 40px margin between the last article and footer -->

Cette différence de comportement est due aux règles de formatage distinctes de Flexbox. Dans un contexte flexible, les marges sont appliquées individuellement à chaque élément du conteneur, ce qui donne des marges non réduites.

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!