Pourquoi margin-top n'agit pas sur les éléments parents-tutoriel CSS-php.cn

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

巴扎黑

Libérer： 2017-06-28 13:44:04

original

1713 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!