Mes marges css ne se comportent pas comme je le souhaite ou comme je l'attends. Il semble que la marge supérieure de mon en-tête affecte les balises div qui l'entourent.
C'est ce que je veux et ce que j'attends : 
...mais c'est ce à quoi j'aboutis : 
Source :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>J'ai exagéré la marge dans cet exemple. La marge par défaut du navigateur sur la balise h1 est un peu plus petite, et dans mon cas, j'utilise la balise Twitter Bootstrap, avec Normalizer.css qui fixe la marge par défaut à 10px. Ce n'est pas si important, le point principal est que je ne peux pas, ne dois pas, ne pas vouloir modifier la marge de la balise h1.
Je suppose que c'est similaire à mon autre question ; Pourquoi ce style CSS margin-top ne fonctionne-t-il pas ? . La question est de savoir comment résoudre ce problème spécifique.
J'ai lu quelques fils sur des problèmes similaires, mais je n'ai pas trouvé de véritables réponses et solutions. Je sais que l'ajout de padding:1px; o border:1px; résout le problème. Mais cela ne fait qu'ajouter de nouveaux problèmes, puisque je ne veux pas de padding ni de border sur mes div-tags.
Il doit y avoir une meilleure solution, une meilleure pratique ? Cela doit être assez courant.
