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

81

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

html css margins Atif Mohammed Ameenuddin
quelle
2
Sie könnten diesen Artikel über Formatierungskontexte interessant finden: tjkdesign.com/articles/…
jensgram
1
Sie scheinen einige der Regeln zu vermissen, die Sie dort verwenden. Sind auch alle Elemente in .alignright schwebend?
Joel Glovier

Antworten:

80

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.

MatTheCat
quelle
Verringern Sie einfach Ihren Spielraum auf das, was Sie möchten.
Kissaki
Bearbeitet, vergrößern oder verkleinern Sie einfach den größeren Rand oder verwenden Sie Polsterung
MatTheCat
8
Ich habe gerade herausgefunden, dass, wenn Sie die Elemente schweben, die Ränder für beide angewendet werden.
Atif Mohammed Ameenuddin
10
Ich wäre vorsichtig, floatwenn ich es als Hack verwenden würde, da es einige böse Nebenwirkungen haben kann. Ich bin in der floatRegel vorsichtig zu verwenden .
Andrew
Wenn Sie einer Stunde eine Höhe geben, wird sie dann zu einer In-Flow-Block-Level-Box? Probieren Sie es aus
Manuel Hernandez
49

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.

Kissaki
quelle
1

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

538ROMEO
quelle
0

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

squarecandy
quelle
-1

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

Richard Max
quelle