recherche

Maison  >  Article  >  interface Web  >  Pourquoi margin-top n'agit pas sur les éléments parents

Pourquoi margin-top n'agit pas sur les éléments parents

巴扎黑
巴扎黑original
2017-06-28 13:44:041686parcourir

Pourquoi margin-top n'agit pas sur l'élément parent :
Suggestion : Écrivez à la main le code autant que possible, ce qui peut effectivement améliorer l'efficacité et la profondeur de l'apprentissage.
En ce qui concerne l'utilisation de base de l'attribut margin-top, il est simple de définir la marge supérieure d'un objet. Voir l'exemple de code suivant : 


<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>为什么margin-top不是作用于父元素</title><style type="text/css"> * 
{ 
  margin:0px; 
  padding:0px; 
} p 
{ 
  width:100px; 
  height:100px; 
  background-color:green; 
  margin-top:50px; 
} 
</style> 
</head> 
<body> 
  <p></p> 
</body> 
</html>

Le code ci-dessus peut définir la marge supérieure de p à 50px, tout fonctionne bien, il n'y a pas de problème, regardons le morceau de code suivant : 


<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> #parent 
{ 
  width:200px; 
  height:200px; 
  background-color:red; 
} #children 
{ 
  width:60px; 
  height:60px; 
  background-color:green; 
  margin:0px auto; 
  margin-top:50px; 
} 
</style> 
</head> 
<body> 
<p id="parent"> 
  <p id="children"></p> 
</p> 
</body> 
</html>

L'intention initiale du code ci-dessus est de faire en sorte que le le haut de l'élément enfant est à 50 pixels de l'élément parent, mais en fait, cela n'a pas produit l'effet escompté. Au lieu de cela, le haut de l'élément enfant était proche de l'élément parent et la marge supérieure semblait être transférée vers le. élément parent, permettant à l'élément parent de générer une marge supérieure. Il s'agit en fait d'un problème typique de fusion de marge, mais tous les navigateurs ne produiront pas ce phénomène. Généralement, les navigateurs standards auront ce phénomène, et IE6 et IE7 n'auront pas de fusion de marge dans cet état. Conditions pour que la fusion de la marge supérieure se produise :
1. Il n'y a pas de frontière entre la marge supérieure de l'élément parent et la marge supérieure de l'élément enfant.
2.Il n'y a pas de contenu non vide entre la marge supérieure de l'élément parent et la marge supérieure de l'élément enfant.
3.Il n'y a pas de remplissage entre la marge supérieure de l'élément parent et la marge supérieure de l'élément enfant.
3. Il n'y a aucun attribut de positionnement (sauf statique et relatif), overflow (sauf visible) et display:inline-block etc. et élément enfant.
4. Ni l'élément parent ni la ressource ne flottent.
Remarque : Les conditions ci-dessus doivent être remplies. Ensuite, la façon de résoudre cette situation est également très simple, il suffit de détruire l’une des situations ci-dessus.
Pour plus d'informations sur la fusion des marges, veuillez vous référer au chapitre Explication détaillée de la fusion des marges.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Problème de marge supérieure entre l'élément parent et l'élément enfantArticle suivant：Problème de marge supérieure entre l'élément parent et l'élément enfant

Articles Liés

Voir plus