18041 sujets

Questions générales et questions de débutants

Un problème avec margin et firefox.

Bonjour,
Plutôt que de longs discours, voici un petit code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <style type="text/css">
    #bleu {
      width: 300px;
      background-color: blue;
    }
    .rouge {
      height: 50px;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="bleu">
    <div class="rouge">
    </div>
    <div class="rouge">
    </div>

  </div>
</body>
</html>


Ma question est la suivante : sous firefox, il n'y a pas de marge en haut du rectangle rouge...

Pourquoi ?

Merci.
Bonjour,

C'est le résulta normal de la fusion des marges verticales des éléments en flux (implémentation incorrecte dans IE 6.0)

Pour éviter cette fusion, ajouter par exemple une bordure:

#bleu {
width: 300px;
background-color: blue;
border: 1px solid blue;
}

Modifié par Laurent Denis (20 Aug 2006 - 17:12)
Merci pour vos explications !

Bizarre cette propriété de fusion des marges... Je ne la trouve pas très logique dans le cas d'un block à l'intérieur d'un autre...

Enfin, c'est mon avis Smiley lol

Bonne soirée !
Sujet clos
Aller à