[résolu] Marges par défaut?

Bonjour,
Je me remets au HTML-CSS après un premier contact très décevant-frustrant, avec cette fois la ferme intention d'arriver à mes fins

Je fais des petits test, et là j'essaie de faire un bloc avec des coins arrondis et une ombre.
Construction du truc: un div conteneur, qui renferme un div pour le haut, un div pour le milieu et un div pour le bas, le div du mileu contenant à son tour un h1 et un p. Rien de transcendant. Et ça marche presque...

Si ce n'est que je ne comprends pas du tout pourquoi mes trois div ne se collent pas directement à la suite l'une de l'autre...

http://www.opfa.org/test

J'ai l'impression que h1 et p ont une marge par défaut non nulle, alors que j'ai stylé html et body avec margin: 0;...

Si je mets h1,p {margin: 0;}, tout rentre dans l'ordre
De plus, si je mets un contour à #fond, ça marche aussi...

J'aimerais bien comprendre... Merci de vos lumières

<div id="contenu">
        <div id="top"></div>
        <div id="fond">
        <h1>titre</h1>
        <p></p>
        </div>
        <div id="bottom"></div>
    </div>

html, body {
padding:0;
margin: 0;
font-family: sans-serif;
}

#contenu {
position: relative;
width: 200px;
}

#top {
height:10px;
background-image: url(top.gif); 
border: 1px solid;}

#fond {
background-image: url(fond.gif);
background-repeat: repeat-y;
}

h1 {
font-size: 10px;
border: 1px solid; }

p {
font-size: 10px;
border: 1px solid;}

#bottom {
height:10px;
background-image: url(bottom.gif); 
border: 1px solid;}
]

Modifié par firfelin (29 Jan 2007 - 17:25)

Hello et bienvenue,

Attention à l'écriture des liens sur le forum : ici, ton url ne fonctionne pas.

Je te conseille aussi de modifier le titre de ton sujet et de le rendre plus pertinent si tu veux mettre le plus de chances de ton côté.

Bonne chance

Bonjour,

a écrit :
J'ai l'impression que h1 et p ont une marge par défaut non nulle, alors que j'ai stylé html et body avec margin: 0;...

Ce sont les réglages par défaut des navigateurs. Ils appliquent quelques règles de CSS sur certaines balises : P, Hn, UL...

Si on ne les remet pas à 0, on a quelque fois des surprises (ou des problèmes). C'est pour ça que nombre de feuilles de style commencent ainsi :

* {
     margin: 0;
     padding: 0;
     }

qui suppriment toutes les marges et paddings par défaut. (Certains navigateurs appliquent des marges, d'autres jouent sur le padding.)

Et pour aller plus loin...

Aaaargh au temps pour moi... j'étais persuadé qu'en mettant html, body {margin: 0;} ça suffisait...

Ce que je ne comprends pas trop, c'est pourquoi est-ce que ça ne marche pas en mettant margin: 0 au #contenu? les éléments contenus dans cette div (#top, #fond# h1 p ...) n'héritent pas des spécifications données au parent?

Et juste pour bien comprendre : comment se fait-il alors que le fait de mettre une bordure à #fond fonctionne...?

#fond {
background-image: url(fond.gif);
background-repeat: repeat-y;
border: 1px solid;
}

Modifié par firfelin (24 May 2006 - 13:54)