Dlaczego moje marginesy div nakładają się i jak mogę to naprawić?

83

Nie rozumiem, dlaczego marginesy tych elementów div nakładają się.

.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>

obrazek

Atif Mohammed Ameenuddin
źródło
2
Ten artykuł na temat kontekstów formatowania może być interesujący: tjkdesign.com/articles/ ...
jensgram
1
Wydaje się, że brakuje Ci niektórych zasad, których tam używasz. Czy wszystkie elementy w rozszerzeniu .alignright również się unoszą?
Joel Glovier

Odpowiedzi:

80

Myślę, że to zwinięty margines. Uwzględniany jest tylko największy margines między dołem pierwszego elementu a górą drugiego.

To całkiem normalne, że nie ma zbyt dużej przestrzeni między dwoma akapitami, np.

Nie da się tego uniknąć przy dwóch sąsiadujących ze sobą elementach, więc musisz powiększyć lub zmniejszyć większy margines.

EDYCJA: por. W3C

Dwa marginesy przylegają wtedy i tylko wtedy, gdy:

  • oba należą do pól na poziomie bloku, które uczestniczą w tym samym kontekście formatowania bloku
  • bez pól liniowych, bez prześwitu, bez wypełnienia i bez obramowania oddziela je
  • oba należą do sąsiadujących pionowo krawędzi pudełka

Nie ma więc zapadania się, floatktóre powoduje wyjęcie elementu z przepływu.

MatTheCat
źródło
Po prostu zmniejsz swój margines do tego, co chcesz.
Kissaki,
Edytowane, po prostu powiększ lub zmniejsz większy margines lub użyj dopełnienia
MatTheCat,
8
właśnie dowiedziałem się, że jeśli zmienisz elementy, to zostaną zastosowane marginesy dla obu.
Atif Mohammed Ameenuddin,
10
Byłbym ostrożny przy używaniu go floatjako hacka, ponieważ może to mieć nieprzyjemne skutki uboczne. Z floatreguły jestem ostrożny .
Andrew,
Jeśli podasz wysokość hr, czy stanie się ona polem na poziomie bloku przepływu? Spróbuj
Manuel Hernandez
49

Marginesy, w przeciwieństwie do dopełnienia (wypełniającego określoną szerokość), to „zrób to jako minimalną odległość”.

Nie da takiej odległości wszystkim elementom.

Jak widać, dolny margines get in touch jest marginesem do pola wprowadzania. To jest tutaj aktywny margines. Drugi margines, górny margines od wejścia, nie działa, ponieważ jest mniejszy i nie dociera do elementu blokowego, w którym faktycznie odepchnąłby element. Te 2 marginesy nakładają się na siebie i nie wpływają na siebie.

Kissaki
źródło
1

Jeśli nie możesz użyć dopełnienia i naprawdę potrzebujesz, aby marginesy się nie nakładały, oto jedna sztuczka:

.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;
}

Uruchom ten fragment do demonstracji:

grobouDu06
źródło
0

Uważaj display: flexna element nadrzędny.

.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>

squarecandy
źródło
-1

Dodaj wyraźny znacznik DIV między dwoma obiektami

Richard Max
źródło