Marges d’un bloc par défaut

© Christian PAULUS. Document créé le 5 avril 2009 , mis à jour le 5 avril 2009.

Ce sont nos choix qui montrent ce que nous sommes vraiment, beaucoup plus que nos aptitudes. Joanne Rowling

Accueil du site > Astuces > CSS > Marges d’un bloc par défaut

CSS / FireFox 3, IE55, IE6, IE7, Opera 9, Safari

Un test tout simple : placer un carré rouge de 100 pixels de côté dans une page.

Puis comparer le résultat comparé sur :

— Internet Explorer 5.5 / Windows XP, nommé ici IE55
— Internet Explorer 6 / Windows XP, nommé ici IE6
— Internet Explorer 7 / Windows Vista, nommé ici IE7
— Apple Safari 3 / Windows Vista et MacOSX 10.5.6 (Leopard)
— Opera 9.63 / Windows Vista
— Google Chrome 1.0.154.53 / Windows Vista
— Mozilla Firefox 3.0.8 / Windows Vista

Le code XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>test</title>
<style type="text/css">
<!--
html {
   background-color:blue;
}
body {
   background-color:yellow;
}
#div1 {
   width:100px;
   height:100px;
   background-color:red;
}
-->
</style>

</head>
<body>
   <div id='div1'></div>
</body>
</html>

Ce qui donne une page avec fond bleu, avec un body jaune, et un bloc div en rouge. Quoi de plus simple ?

Voici ce que donne cet exemple pour l’ensemble des navigateurs testés, sauf IE* :

Copie écran de cet exemple pour les butineurs sauf IE* {PNG}

On voit que le bloc div est positionné à gauche, en haut de la page, à une distance égale. Ici, 8 pixels.

Le bloc est décalé sous IE6 et IE7 {PNG}

Sous IE6 et IE7, le bloc rouge est placé légèrement plus bas et plus à droite, le body jaune laisse apparaître le fond bleu de la page.

SOus IE55, le body prend toute la page. {PNG}

Sous IE55, le body prend toute la surface disponible, le fond bleu n’apparaît pas, le décalage constaté pour les versions sœurs est là. Le résultat est identique sur IE6 lorsque le prologue XML débute le code de la page. A propos du border box model et des bonnes déclarations du DOCTYPE, les notes, tests et remarques ne manquent pas sur le net, dont le tableau comparatif de Henri Sivonen, ou cette note de Thenderseb dans son tutoriel concernant XHTML et CSS, etc.

Tous sauf IE IE55, IE6, IE7
A parti du bord gauche 8 10
A partir du bord supérieur (top) 8 15

En corrigeant le padding du html, il est possible de supprimer cet écart de positionnement sous IE6. Pour IE55, c’est le padding du body. Le plus simple est de supprimer les marges internes et externes pour tous :

* { margin:0; padding:0; }

Ce qui donne au final pour le bloc de déclaration CSS :

<style type="text/css">
<!--
* { margin:0; padding:0; }
html {
   background-color:blue;
}
body {
   background-color:yellow;
}
#div1 {
   width:100px;
   height:100px;
   background-color:red;
}
-->
</style>

Plussoyez !

Répondre à cet article