Effondrement de la marge CSS: Pourquoi mon sommet de marge déplace-t-il l'élément parent?

Explication détaillée de l'effondrement de la marge CSS: résoudre intelligemment les problèmes de marge

Lors de l'apprentissage de la disposition du CSS, les attributs margin apportent souvent des résultats inattendus, en particulier le phénomène de «l'effondrement de la marge». Cet article utilisera un cas pour analyser profondément les causes et les solutions de l'effondrement de la marge.

Question: Supposons en un<canvas></canvas> Imbriqué un élément à l'intérieur<div> élément (id est "un") et définir <code>margin-top pour "un". Étrangement, après avoir réglé margin-top , non seulement l'élément "un" est déplacé vers le bas,<canvas></canvas> L'élément s'est également déplacé vers le bas.

Structure du code (simplifié):

HTML: <canvas><div id="one">...</div></canvas>

CSS: #one { margin-top: 20px; } (D'autres styles sont omis ici)

Analyse: Il s'agit de l'effondrement de la marge CSS. Lorsque la hauteur de l'élément parent est auto , l'élément enfant est un élément au niveau du bloc et que l'élément parent n'a pas padding et border , la hauteur de l'élément parent sera affectée par la margin-top de l'élément enfant.<canvas></canvas> La hauteur d'un élément est calculée automatiquement, tandis que "un" est un élément au niveau du bloc, sa margin-top et<canvas></canvas> Les marges supérieures de<canvas></canvas> La hauteur du corps augmente, se déplaçant ainsi vers le bas dans son ensemble.

Solution: Il existe plusieurs façons d'éviter l'effondrement de la marge:

1. Définissez la hauteur de l'élément parent:<canvas></canvas> L'élément spécifie une valeur de hauteur claire, par exemple height: 100px; .
2. Ajouter une bordure ou une marge intérieure: ajouter border ou padding à l'élément parent, comme border: 1px solid #ccc; ou padding: 10px; .
3. Utilisez la marge intérieure au lieu de la marge extérieure: remplacez margin-top par padding-top .
4. Utilisez un positionnement flottant ou absolu: Set float: left; ou position: absolute; pour l'élément enfant "un".

En comprenant le mécanisme de l'effondrement de la marge, nous pouvons mieux contrôler la disposition CSS et éviter des problèmes similaires.

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!