Espace dans le positionnement de boîtes

**elise95** · 07/08/2019, 18h50

Bonjour,

je débute en CSS.

j'ai la structure html suivante:

Code HTML :

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

1
2
3
4
5
<body>
<header></header>
<article></article>
<footer></footer>
</body>

j'ai un fichier css avec pour header, article et footer une propriété background et comme valeur une couleur différente pour bien les distinguer.
à l'affichage les 3 rubriques sont espacées par un blanc.
quand je rajoute un padding par exemple pour article, l'espace entre article et header et celui entre article et footer disparait. Pourquoi?
quand je rajoute un padding à header, l'espace au dessus du header(haut de page) disparait.
je pensais que le padding agirait sur le contenu de la boite et non sur ce qu'il y'a autour.

je me serais attendue à ce que ça disparaisse en faisant un margin à 0 pour mes 3 rubriques.

Merci

**ProgElecT** · 07/08/2019, 21h13

Salut

j'ai un fichier css

ben, il serait intéressent de nous le mettre pour vérification.

**elise95** · 07/08/2019, 23h46

Voilà le code. Merci.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.header{
    background: grey;
}
.main{
    background: lightgrey;
    padding: 20px;
}
.footer{
    background: grey;
}

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
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>restaurant</title>
 
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <h1 class="header-title">Le restaurant</h1>
        <nav class="header-nav">
            <a href="index.html" title="Accueil">Accueil</a>
            <a href="menu.html" title="Voir le menu">Menu</a>
            <a href="contact.html" title="Nous contacter">Contact</a>
        </nav>
        <img src="img/banniere-restaurant.jpg" width="1260" height="326" alt="">
    </header>
    <article class="main">
        <h2>A propos du restaurant</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo laboriosam debitis dolores et quo cum non ab minus eveniet corporis, accusantium suscipit sapiente, cumque corrupti ducimus, ipsum magnam mollitia eum.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed sit quaerat excepturi hic quo itaque optio modi exercitationem nemo? Alias tempore quod inventore aperiam quam magni, cum impedit modi.</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id ratione quaerat quam minus totam rem possimus repudiandae, optio aperiam vel molestiae animi labore, a blanditiis odit nisi! Impedit, sint. Doloremque!</p>   
        <hr>
        <h2>Spécialités</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati itaque perferendis maxime quasi doloribus dicta perspiciatis, ipsa reprehenderit soluta voluptates mollitia eius nobis illo repellendus sint totam consectetur laboriosam officiis?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium vel nulla minus deserunt fugit officiis quisquam id neque totam facere, facilis saepe tenetur. Facilis mollitia earum voluptatem minus harum illo.</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem necessitatibus magni mollitia cupiditate neque, consequatur aperiam optio, odio, repellat exercitationem tenetur? Unde laborum sunt laudantium inventore ea corporis consequuntur praesentium!</p>
        <hr>
        <h2>Evènements</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, eum aliquam quibusdam voluptate veritatis quam at nesciunt vitae sunt ipsum nam deserunt hic! Esse ipsa a, ab magnam quas perspiciatis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore, earum error. Aperiam assumenda minus, repellendus itaque, ad voluptates omnis distinctio id cupiditate eos quia, sequi nam quidem voluptatibus! Sequi, vel?</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima quidem atque explicabo libero minus consequatur inventore repellat. Sint voluptates, neque corporis nihil aliquam in fugiat ducimus adipisci, nostrum exercitationem deleniti.</p>
    </article>
    <footer class="footer">
        <address>123 rue de Gaulle.</address>
    </footer>
</body>
</html>

**elise95** · 08/08/2019, 03h21

Je crois que c'est les marges par défaut du h2 en haut dans article et du p en bas qui créent un blanc avec header et footer.
le padding dans le code css y remédie.

**NoSmoking** · 08/08/2019, 17h18

Bonjour,
« les éléments de type block et qui sont dans le flux présentent la particularité de fusionner leurs marges verticales pour n'en faire qu'une, la plus grande. Cela se nomme la fusion des marges. »

Pour plus d'informations lire la suite dans cette discussion : DIV décalage bordure étrange.

Tu trouveras d'autres discussions : recherche fusion des marges.

Espace dans le positionnement de boîtes

Positionnement en CSS

Discussions similaires

Partager

Partager