Bonjour,

J'ai repris à 0 l'apprentissage du HTML et CSS il y a quelques jours en suivant un tutorial sur le net et ainsi j'ai une question qui me vient.
En général je suis plutôt du genre à chercher seul et peu utiliser les forum mais je pense maintenant qu'en faisant ça je loupe pas mal d'opportunité d'apprendre.

Je souhaite créer une marge sur le côté gauche d'une page. Je l'imagine juste après le body pour ne pas entraver la structure classique du reste du site.

J'ai fait ça rapidement en exemple afin d'illustrer.

Je ne comprends pas d'où vient l'espace en haut. Et je pense que c'est la raison pour laquelle le 100vh dépasse de la hauteur de la page.

Merci à ceux qui auront la gentillesse de m'expliquer ce qu'il se passe. :-)

Nom : 2018-02-16 13_03_06-Microsoft Edge.png Affichages : 1117 Taille : 38,7 Ko

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Zozor - Le Site Web</title>
        <link rel="stylesheet" href="style.css" />
    </head>
 
    <body>
    	<div id="ma_page">
    	<div id="gauche">
    	</div>
        <header>
            <h1>Zozor</h1>
            <h2>Carnets de voyage</h2>
        </header>
 
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">CV</a></li>
            </ul>
        </nav>
 
        <section>
            <aside>
                <h1>À propos de l'auteur</h1>
                <p>C'est moi, Zozor ! Je suis né un 23 novembre 2005.</p>
            </aside>
            <article>                
                <h1>Je suis un grand voyageur</h1>
                <p>Bla bla bla bla (texte de l'article)</p>
            </article>
        </section>
 
        <footer>
            <p>Copyright Zozor - Tous droits réservés<br />
            <a href="#">Me contacter !</a></p>
        </footer>
        </div>
    </body>
</html>

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#gauche{
	float : left;
	background-color: black;
	width: 50px;
	height: 100vh;
	padding-top: 0px;
	margin-top: 0px;
}
 
#ma_page
{
	width: 900px;
	margin: auto;
}
 
body
{
	padding-top: 0px;
	margin-top: 0px;
}