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

Question 1

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>

Rozwiń fragment

obrazek

Question 2

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.

Question 3

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.

Question 4

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:

Pokaż fragment kodu

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>

Rozwiń fragment

Question 5

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>

Rozwiń fragment

Question 6

Dodaj wyraźny znacznik DIV między dwoma obiektami