<body> default margin
November 24, 2022 - Reading time: 2 minutes

J'ai enfin compris que certains éléments HTML avaient une marge et/ou padding par défaut appliquée par les navigateurs, par exemple <body> a une marge par défaut de 8px sur Firefox. Résultat : si vous coloriez votre page en jaune :

body {
 background-color: gold;
}

et votre tête de page en bleu (en fournissant une hauteur pour que le bloc soit visible) :

header {
 background-color: aqua;
 height: 200px;
}

pour la page suivante :

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
    </body>
</html>

eh bien vous verrez apparaitre ce qui semble être une bordure non sollicitée de votre <header> ! D'après ce que j'ai compris, il s'agit plutôt de l'espace que se ménage le <body> par rapport à ses éléments enfants donc c'est plutôt sur <body> qu'il faut agir. Pour le débarrasser de ses marges cachées, proposition de solution :

body {
 background-color: gold;
 margin: 0;
}

(Voir sinon une autre proposition dans un article plus récent.) C'est le même principe pour tous les éléments qui ont une marge par défaut paramétrée par le navigateur, <h1> par exemple ou encore, <ul>.

Search

Categories