Warum überlappen sich meine Div-Ränder und wie kann ich das beheben?

Question 1

Ich verstehe nicht, warum sich die Ränder dieser Divs überlappen.

.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}

<div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div>

Erweitern Sie das Snippet

Bild

Question 2

Ich denke, es ist ein zusammengebrochener Rand. Es wird nur der größte Abstand zwischen der Unterseite des ersten Elements und der Oberseite des zweiten Elements berücksichtigt.

Es ist ganz normal, zwischen zwei Absätzen nicht zu viel Platz zu haben, z.

~~Sie können dies bei zwei benachbarten Elementen nicht vermeiden, sodass Sie den größeren Rand vergrößern oder verkleinern müssen.~~

EDIT: vgl. W3C

Zwei Ränder grenzen genau dann aneinander, wenn:

Beide gehören zu In-Flow-Boxen auf Blockebene, die am gleichen Blockformatierungskontext teilnehmen

Keine Linienkästen, kein Abstand, keine Polsterung und kein Rand trennen sie

beide gehören zu vertikal benachbarten Kastenkanten

Es gibt also kein Zusammenfallen, mit floatdem das Element aus dem Fluss genommen wird.

Question 3

Ränder sind im Gegensatz zur Polsterung (die eine bestimmte Breite auffüllt) ein "dies als Mindestabstand tun".

Dieser Abstand wird nicht zu allen Elementen hergestellt.

Wie Sie sehen können, die in Kontakt zu treten ist Block unteren Rand auf das Eingabefeld Marged. Das ist die hier aktive Marge. Der andere Rand, der obere Rand der Eingabe, ist nicht wirksam, da er kleiner ist und kein Blockelement erreicht, in dem er das Element tatsächlich zurückschieben würde . Die beiden Ränder überlappen sich und beeinflussen sich nicht.

Question 4

Wenn Sie keine Polsterung verwenden können und wirklich müssen, dass sich der Rand nicht überlappt, ist hier ein Trick:

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

Bitte starten Sie dieses Snippet für die Demo:

Code-Snippet anzeigen

div {
  margin: 10px;
  background: rgb(48, 158, 140);
  padding: 5px 15px;
  font-weight: bold;
  color: #fff;
}

.fake-margin {
  border-top: 10px solid transparent;
  background-clip: padding-box;
}

<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>

Erweitern Sie das Snippet

Question 5

Achten Sie display: flexauf das übergeordnete Element.

.flex {
  display: flex;
  flex-direction: column;
}

.block {
  display: block;
}


/* css for example only */
div {
  padding: 1em;
  background: #eee;
}
p {
  font-size: 20px;
  margin: 1em 0;
  background: pink;
  padding: 5px;
}
p:first-child {
  margin-top: 0;
}

<h1>display: flex</h1>
<div class="flex">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<h1>display: block</h1>
<div class="block">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>

Erweitern Sie das Snippet

Question 6

Fügen Sie ein klares div-Tag zwischen den beiden Objekten hinzu