Marges négatives en CSS : pourquoi margin-top:-5 n'est-il pas la même chose que margin-bottom:5 ?

Explorer les marges négatives : comportement, intuition et différences

CSS permet des marges négatives, mais leurs effets peuvent prêter à confusion. Pour démystifier ce sujet, explorons leur comportement et comprenons pourquoi margin-top:-5 n'est pas équivalent à margin-bottom:5.

Comprendre les marges négatives

Négative les marges sont appliquées en dehors de la bordure et sont invisibles dans la marge visuelle. En effet, ils affectent la zone de marge tout en laissant le contenu et les zones de remplissage intacts. Pour les éléments positionnés de manière absolue, les marges négatives déplacent l'élément de la quantité spécifiée sans affecter la mise en page.

Représentation graphique

Imaginez un élément avec une marge supérieure négative :

[Image d'un rectangle avec une marge supérieure négative]

La zone de marge se rétrécit d'un montant négatif, mais le contenu et les zones de remplissage ne sont pas affectés.

Intuition derrière Marges négatives

Les marges négatives « renforcent » un élément car elles diminuent la taille de la zone de marge. Pour la marge supérieure < 0, cela provoque le déplacement de l'élément vers le haut.

Différence entre les marges supérieure et inférieure

margin-top:-8px n'est pas la même que margin-bottom:8px à cause de l'effondrement de la marge. Lorsqu'un élément possède des marges négatives et positives sur ses côtés opposés, les marges s'effondrent, éliminant ainsi la marge négative. En conséquence, aucun mouvement net ne se produit.

Astuce bonus pour le centrage vertical

Lorsque vous utilisez % pour les marges latérales (c'est-à-dire en haut ou en bas), la valeur est calculée en pourcentage de la largeur du bloc conteneur. Cela peut entraîner des problèmes de centrage vertical. Il est préférable d'utiliser margin-top:-50vh pour le centrage vertical, où vh désigne l'unité de hauteur de la fenêtre.

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!