CSS-Rand verbunden?

Unter Druckbildschirm von Google Chrome HTML/CSS-Ansicht.CSS-Rand verbunden?

Ein Element unter anderen, margin: 10px;, also sollten sie voneinander 20px werden.

Aber sie sind nicht. Sie sind 10px auseinander, wie die Ränder verbunden sind.

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>

Quelle

2017-05-16 Adrianno Barello

nehmen Sie es einfach ein Mann! –

Dies ist [Randkollaps] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). – jonrsharpe

Warum kollabiert meine? : / –

Es gibt Fälle (you can read about it here) wobei Ränder zwischen Elemente kollabierte (überlappt, eine oben auf der anderen Seite), und dies ist eine gewünschte Verhalten, so dass es nicht ein Fehler ist.

Dies ist einer dieser Fälle und Ihre aktuelle Ausgabe:

Benachbartes Geschwister

Die Ränder von benachbarten Geschwistern zusammengebrochen sind (außer wenn die späteren Geschwister werden muss, vorbei schwimmt gelöscht) .

Zuerst haben einige .post Blöcke mit, dass die Margen, aber diese Margen arbeiten gut, weil die Blöcke schwebte werden. Wenn Sie die Klasse float: left aus der Klasse .post entfernen, sehen Sie, dass die Ränder dieser Blöcke ebenfalls reduziert sind.

Zu wissen, dass Marge Kollabieren existiert, können Sie es berücksichtigen, wenn die Gestaltung von Layouts:

Seite Fluss geht von links nach rechts, von oben nach unten . Anstatt also margin-top und margin-bottom zu definieren, definieren Sie nur .

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>

Quelle

2017-05-17 09:10:25

CSS-Rand verbunden?

Antwort

Verwandte Themen