Pourquoi « Marge : Auto » ne centre-t-il pas les éléments verticalement ?

Centrer les éléments verticalement avec « Marge : Auto »

Alors que « Marge : auto » centre efficacement les éléments horizontalement, ses capacités d'alignement vertical peuvent être limité. Cela est dû à la façon dont les boîtes de blocs sont empilées verticalement et au risque d'effondrement des marges.

Selon la section 10.6.2 de CSS2.1, les boîtes de blocs sont empilées de haut en bas dans un flux normal. Les marges verticales peuvent s'effondrer et se réduire à zéro dans certaines circonstances. Dans les cas où le bloc contenant a une hauteur automatique et une seule boîte de bloc, ses marges supérieure et inférieure sont intrinsèquement nulles.

Pour plusieurs boîtes de bloc dans le même flux ou des boîtes hors flux affectant le flux entrant mise en page, la résolution des marges automatiques devient plus complexe. Cela s'étend aux éléments en ligne et aux flotteurs, où les marges automatiques gauche et droite sont définies sur zéro pour éviter les interférences avec les zones de ligne.

En revanche, les zones en position absolue ignorent les autres zones dans le même contexte de positionnement. Par conséquent, les marges supérieures et inférieures automatiques peuvent être calculées pour eux en fonction uniquement des blocs qu'ils contiennent.

Flexbox fournit une solution unique pour flexibler des éléments qui sont pleinement conscients les uns des autres dans le contexte de formatage flexible. Les marges verticales dans flexbox suivent des règles distinctes, permettant un contrôle plus précis sur l'alignement des éléments.

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!