Résumé des problèmes fréquemment rencontrés dans l'utilisation du CSS margin-top

Dans les styles CSS, l'attribut margin-top définit la marge supérieure d'un élément. Il peut autoriser des valeurs négatives. La valeur par défaut pour définir une marge supérieure fixe est 0. Tous les principaux navigateurs prennent en charge l'attribut margin-top. A travers cet article, nous parlerons spécifiquement de certains problèmes souvent rencontrés lors de l'utilisation de l'attribut margin-top dans les pages front-end. Que dois-je faire si le paramètre affecte l'élément parent ? Que dois-je faire si l’attribut margin-top ne fonctionne pas ? etc.

1. Que dois-je faire si le paramètre margin-top affecte l'élément parent ?

1. Comment résoudre le problème de pliage des marges affectant l'élément parent à partir de la marge supérieure de l'élément enfant

Principe : pliage des marges (effondrement des marges)

Deux marges adjacentes (marge) ou plus fusionnent verticalement en une marge. La contiguïté ici signifie qu'il n'y a pas de padding-top, padding-bottom, border-top, border-bottom supérieur et inférieur, et que le contenu de l'élément n'est pas vide.

Le pliage de marge le plus courant se produit lorsque des éléments

sont juxtaposés, chaque p a une marge de 1em au-dessus et en dessous, mais les p adjacents n'afficheront qu'un écart de 1em au lieu de 2em.

2. Pourquoi la marge supérieure des éléments enfants CSS affecte-t-elle l'élément parent

Il existe de nombreuses solutions :

1) Ajouter un débordement : caché ou padding, bordure au parent

2) Utiliser un padding au lieu d'une marge

3 L'ajout de margin-top aux éléments enfants augmentera le problème pour l'élément parent

. margin-top des éléments enfants Cela ne sépare pas l'élément enfant de l'élément parent, mais l'effet est équivalent à l'ajout d'un margin-top à l'élément parent

Il existe également des solutions, notamment :

1) Modifiez la hauteur de l'élément parent, ajoutez une simulation de style padding-top (padding-top:1px;)

2) Ajoutez overflow:hidden;

3) Float ( float: à gauche ; disponible mais non recommandé)

4) Ajouter une bordure à l'élément parent (border:1px solid transparent)

5) Déclarer le positionnement absolu pour l'élément parent ou l'élément enfant

6) Ajouter la génération de contenu à l'élément parent #father:before{content:' ';display:table};

2 . Que dois-je faire si l'attribut margin-top ne fonctionne pas ?

1. Causes et solutions à l'échec de la marge supérieure de Firefox

La marge inférieure d'un élément flottant au niveau du bloc est toujours adjacente à la marge supérieure du prochain frère flottant au niveau du bloc, à moins que cet élément frère n'utilise un. fonctionnement clair.
La marge supérieure d'un élément flottant au niveau du bloc est adjacente à la marge supérieure de son premier enfant flottant au niveau du bloc (premier enfant flottant au niveau du bloc entrant) (si l'élément n'a pas de bordure supérieure, pas de padding-top et les éléments enfants ne sont pas effacés).

2. margin-top échoue, css + div layout CSS modèle de boîte marge problème de fusion

en In Regular flux de documents, les marges verticales adjacentes de deux ou plusieurs modèles de boîtes au niveau des blocs seront réduites. La méthode de calcul de la valeur de marge finale est la suivante :
a. Si toutes sont des valeurs positives, prenez la plus grande
b Si toutes ne sont pas des valeurs positives, prenez la valeur absolue, puis soustrayez la valeur maximale de. la valeur positive ;
c. S'il n'y a pas de valeur positive, prenez la valeur absolue, puis soustrayez la valeur maximale de 0.

3. Plusieurs raisons pour lesquelles l'attribut CSS margin-top ne fonctionne pas

Raison 1 : Fusion des marges La propriété margin-top n'est pas valide.

Raison 2 : Les éléments enfants et les éléments parents peuvent également entraîner l'échec des marges définies sur les éléments enfants

Questions et réponses liées à l'attribut margin-top

1 Posez-moi des questions sur la marge supérieure

2. Placez un petit div dans un grand div CSS et définissez l'attribut margin-top sur le petit div. Pourquoi le grand div flotte-t-il également ? >3 . Pourquoi le paramètre margin-top sur les éléments enfants affecte-t-il l'élément parent ?

[Recommandations associées]

1.

Résumé des attributs et de l'utilisation des marges CSS

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!