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>

Bild

Question 2

Ich denke, es ist eine zusammengebrochene Marge. Es wird nur der größte Abstand zwischen dem unteren Rand des ersten Elements und dem oberen Rand des zweiten berücksichtigt.

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

~~Das lässt sich bei zwei benachbarten Elementen nicht vermeiden, also muss der größere Rand vergrößert oder verkleinert werden.~~

EDIT: vgl. W3C

Zwei Ränder grenzen genau dann aneinander, wenn:

beide gehören zu In-Flow-Boxen auf Blockebene, die am selben Blockformatierungskontext teilnehmen

keine Linienkästen, kein Freiraum, keine Polsterung und kein Rand trennen sie

beide gehören zu vertikal benachbarten Kastenkanten

Es gibt also kein Zusammenbrechen mit float was das Element aus der Strömung nimmt.

Question 3

Ränder sind im Gegensatz zum Auffüllen (das eine bestimmte Breite auffüllt) ein „Tun Sie dies als Mindestabstand“.

Es wird diese Distanz nicht zu allen Elementen bringen.

Wie Sie sehen, ist die in Kontakt kommen Der untere Rand des Blocks wird zum Eingabefeld hin begrenzt. Das ist die hier aktive Marge. Der andere Rand, der obere Rand von der Eingabe, ist nicht wirksam, da er kleiner ist und kein Blockelement erreicht, wo er eigentlich wäre zurückschieben das Element. Die beiden Ränder überlappen sich und beeinflussen sich nicht gegenseitig.

Question 4

Wenn Sie keine Polsterung verwenden können und wirklich einen Rand benötigen, der sich 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:

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>

Question 5

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

Question 6

Achten Sie auf display: flex auf dem übergeordneten 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>