Alignement vertical d'un élément

Version imprimable

Bonjour
J'essaie de centrer une boite (blanche) dans un écran (coloré) avec la boite positionnée en haut de l'écran. Mais j'ai toujours un espace entre la boite et le haut de l'écran (IE et Firefox)
Ci-dessous mon code:

fichier index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Titre de la page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="style.css" rel="stylesheet" media="all" type="text/css"> 
	</head>
	<body>
		<!-- Corps central-->
		<div id="corps_central">
			<h1>Texte au format h1</h1>
			<p>bla bla bla bla bla bla bla bla bla bla bla bla bla
			<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla
			<p>bla bla bla bla bla bla bla bla&hellip;
		</div>
	</body>
</html>

Fichier style.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Initialisation */
html, body
 {
 margin:0;
 padding:0;
 border:0;
 }
body
 {
 background-color: #FFFFCC; 
 }
/* Corps central*/
#corps_central
{
 background-color: white; 
 width: 960px;
 padding-top:0;
 margin-top:0;
 margin: auto;
 }

Merci pour votre aide

22/01/2015, 11h44
Bisûnûrs

Tu peux axer tes recherches sur les termes "fusion des marges".

Merci

J'ai résolu le problème en mettant un valeur négative (-20px) à la propriété margin-top de mon élément. Mais je ne comprends pas la logique, car les éléments html et body sont déclarés avec margin, padding et border-style-top à 0
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 /* Initialisation */ html, body { margin:0; padding:0; border-top-style:0; } body { background-color: #FFFFCC; } /* Corps central*/ #corps_central { background-color: white; width: 960px; padding-top:0; margin-top:-20px; margin-left: auto; margin-right:auto; border-top-style:0; }

22/01/2015, 15h25
Bisûnûrs

T'as pas dû chercher ce qu'était la fusion des marges hein ? :)
22/01/2015, 16h05
gpsman

A priori si, mais des marges nulles (padding, margin et border) qui fusionnent ou s'additionnent, cela devrait faire une marge résultante nulle.

Mais j'ai surement raté quelque chose
22/01/2015, 16h11
Bisûnûrs

Ton élément h1 a des marges non nulles par défaut qui fusionnent avec ses parents.
22/01/2015, 16h43
gpsman

Merci. Là, j'ai compris