Marge CSS connectée?

Sous l'écran d'impression de google chrome html/css view.Marge CSS connectée?

Un élément sous une autre, margin: 10px;, donc ils devraient être 20px les uns des autres.

Mais ils ne le sont pas. Ils sont séparés de 10px, comme les marges sont connectées.

body { 
 
    margin: 0; 
 
    background-image: url("2.png"); 
 
    background-repeat: repeat-x; 
 
    font-family: 'Verdana'; 
 
    font-size: 17px; 
 
} 
 
#logo { 
 
    background-image: url("logo.png"); 
 
    width: 527px; 
 
    height: 58px; 
 
    background-repeat: no-repeat; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 7px; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.nav { 
 
    background-color: #55585d; 
 
    height: auto; 
 
    margin-top: 10px; 
 
    border-bottom: 2px solid #44474c; 
 
    border-top: 2px solid #44474c; 
 
    text-align: center; 
 
} 
 
.nav > ul { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.nav > ul li { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    margin-right: 30px; 
 
    font-weight: 700; 
 
} 
 
/* 1195px width */ 
 
#center { 
 
    width: 1195px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#container { 
 
    width: 864px; 
 
    min-height: 500px; 
 
    margin-left: 16px; 
 
    float: left; 
 
} 
 
.post { 
 
    width: 392px; 
 
    height: 453px; 
 
    box-shadow: 3px -3px 6px 0px #000000, 
 
    -1px 1px 1px 0px #000000; 
 
    margin: 10px; 
 
    float: left; 
 
} 
 
#aside { 
 
    width: 315px; 
 
    float: left; 
 
    min-height: 500px; 
 
} 
 
.abox1 { 
 
    margin: 10px; 
 
    width: 279px; 
 
    height: 453px; 
 
    box-shadow: 3px -3px 6px 0px #000000, 
 
    -1px 1px 1px 0px #000000; 
 
}

<!DOCTYPE html> 
 
<html lang="pl"> 
 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <meta charset="utf-8"> 
 
    <title>Devloger</title> 
 
    <!--[if lt IE 9]> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 
<body> 
 
<header> 
 
    <div id="logo"></div> 
 
    <h1 class="hidden">Devloger</h1> 
 
    <nav> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li> 
 
      Strona Główna 
 
     </li> 
 
     <li> 
 
      Kategorie 
 
     </li> 
 
     <li> 
 
      Spis Treści 
 
     </li> 
 
     <li> 
 
      Współpraca 
 
     </li> 
 
     <li> 
 
      Kontakt 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</header> 
 
<div id="center"> 
 
    <main> 
 
    <div id="container"> 
 
     <div class="post"> 
 
     </div> 
 
     <div class="post"> 
 
     </div> 
 
     <div class="post"> 
 
     </div> 
 
     <div class="post"> 
 
     </div> 
 
     <div class="post"> 
 
     </div> 
 
     <div class="clear" style="clear: both;"></div> 
 
    </div> 
 
    </main> 
 
    <aside> 
 
    <div id="aside"> 
 
     <div class="abox1"> 
 
     </div> 
 
     <div class="abox1"> 
 
     </div> 
 
     <div class="abox1"> 
 
     </div> 
 
    </div> 
 
    </aside> 
 
</div> 
 
<div class="clear" style="clear: both;"></div> 
 
</body> 
 
</html>

Source

2017-05-16 Adrianno Barello

le prendre homme facile! –

Ceci est [réduction de la marge] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). – jonrsharpe

Pourquoi le mien s'est effondré? : / –

Il y a des cas (you can read about it here) où les marges entre les éléments sont effondrés (chevauchées, l'une sur l'autre), ce qui est un comportement prévu, il est donc pas une erreur.

Ceci est un de ces cas et votre numéro actuel:

frères et sœurs adjacents

Les marges de frères et sœurs adjacentes sont effondrés (sauf lorsque le frère plus tard doit être effacé flotteurs passés) .

Tout d'abord vous avez des blocs .post avec que les marges, mais ces marges fonctionnent bien parce que les blocs flottaient. Si vous supprimez float: left de la classe .post, vous verrez que les marges de ces blocs sont également réduites.

Sachant que effondrements de marge existe, vous pouvez le prendre en compte lors de la conception de modèles:

flux Page va de gauche à droite, haut en bas. Ainsi, au lieu de définir un margin-top et margin-bottom, définissez uniquement un margin-bottom.

aside { 
 
    width: 315px; 
 
    float: left; 
 
    min-height: 500px; 
 
} 
 
.abox1 { 
 
    margin: 0 10px 20px 10px; 
 
    width: 279px; 
 
    height: 453px; 
 
    box-shadow: 3px -3px 6px 0px #000000, 
 
    -1px 1px 1px 0px #000000; 
 
}

<aside> 
 
    <div class="abox1"></div> 
 
    <div class="abox1"></div> 
 
    <div class="abox1"></div> 
 
</aside>

Source

2017-05-17 09:10:25

Marge CSS connectée?

Répondre

Questions connexes