28173 sujets

CSS et mise en forme, CSS3

Bonjour, voilà un truc sur lequel je bloc souvent :
<html>
 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <style type="text/css">
      body{margin:0;padding:0;}
      div{background:red;height:200px;}
      h1{margin:30px 0;background:green;}
    </style>
  </head>
  
  <body>
    <div>
      <h1>TEST</h1>
    </div>
  </body>
  
</html>

Le problème c'est que sous FireFox, le background à l'air de subir la marge appliqué au H1 .. en fait la marge premier enfant du block.

Quelqu'un à une idée ?

Merci. Smiley smile
Il ne s'agit pas d'un bug, même si ce comportement est rarement compris.

Quelques explications : blocs imbriqués et fusion des marges

Pour éviter que la marge ne se transmette au parent, on utilise généralement un padding-top:1px ou un border de la même couleur que le fond (donc invisible)
Modifié par <nicolas> (02 May 2007 - 17:52)
Bonjour,
Firefox a un comportement standard, il fusionne la marge du conteneur
(0px) avec celle de son enfant <h1>, ce qui a pour effet d'annuler
la marge haute de 30px.
La différence de rendu entre IE et les autres navigateurs est liée à la
présence de la propriété height qui active ce qu'on appelle le layout
au niveau du div conteneur et provoque dans ce cas là un comportement
non conforme.
Pour plus d'explications sur le concept de layout, lire la première partie de cet article.

Quelques explications et solutions.
Modifié par Hermann (03 May 2007 - 14:08)