Espace entre html en body

**Meeez** · 16/02/2018, 13h13

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 : 1121
Taille : 38,7 Ko

Nom : 2018-02-16 13_03_06-Microsoft Edge.png
Affichages : 1121
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;
}

Invité · 16/02/2018, 15h36

Bonjour,

Certaines balises ont des consignes CSS par défaut.
C'est le cas de <html> <body> qui ont un padding ou margin par défaut.

La solution ici :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

html, body { padding:0; margin:0; }

Pour l'appliquer à tous les éléments :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

* { padding:0; margin:0; border:0; }

Cela dit, ton code HTML est propre. C'est bien.

Mais au lieu de float:left, intéresse-toi à display:flex; (flexbox)

**Meeez** · 16/02/2018, 15h47

Super merci ! J'ai hâte de tester dès que possible. #EDIT : Ça fonctionne parfaitement ! Merci

Pour ma culture, est-ce qu'il est commun d'utiliser une flexbox et de s'en servir pour mettre le header, div, section, footer, etc... à l'intérieur ? Et ainsi en maitriser l'emplacement avec les différentes possibilités offertes par flexbox ?

Merci

Invité · 16/02/2018, 16h19

Oui.
En attendant le système de grid CSS.

Espace entre html en body [CSS 3]

CSS

Discussions similaires

Partager

Partager