margin-top ne fonctionne pas avec :before

Question

J'ai inséré du contenu en utilisant le pseudo-élément :before pour une classe. J'ai essayé de positionner ce contenu en utilisant margin-top mais firefox ignore tout simplement la propriété. Le code est le suivant :

.bef {
  line-height: 2em;
  white-space: nowrap;
  font-size:24px;
  display: block;    
  }

.bef:before {
  display: block;
  margin-top:2em;
  padding: 0;
  color: #666666;
  content:"Hello";    
  }

Quelqu'un sait-il pourquoi Firefox ignore la propriété margin-top ?

EDIT : Bien que margin-top soit totalement ignoré, margin-bottom:- X em fonctionne et je suis capable de déplacer l'élément :before.

Answer 1

Essayez de faire en sorte que .bef s'affiche également en bloc ? Je suppose que l'élément contenant le :before doit être en bloc pour qu'il puisse prendre en compte le margin-top...

Answer 2

Il semble que Darko Z ait raison.

http://jquery.nodnod.net/cases/577

Hypothétiquement, les deux premiers cas de test (séparés par <hr> ) devraient être rendus de manière identique, ce qu'ils font dans Gecko (via FF3.5/Mac), mais Webkit (via Safari4/Mac) rend les :before y :after comme étant en ligne. Le troisième cas de test semble impliquer que Webkit exige actuellement que l'élément déclencheur soit block pour que le contenu généré soit block.

La spécification n'est pas claire sur le comportement correct à adopter. Il peut être intéressant de poser une question sur www-style pour voir quel est le comportement correct du moteur de rendu, puis de déposer un bogue avec le moteur de rendu incorrect pour qu'il soit corrigé dans les futures versions. N'hésitez pas à utiliser mon code comme un cas de test.