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>
Odpowiedzi:
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
Nie ma więc zapadania się,
float
które powoduje wyjęcie elementu z przepływu.źródło
float
jako hacka, ponieważ może to mieć nieprzyjemne skutki uboczne. Zfloat
reguły jestem ostrożny .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.
źródło
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>
źródło
Uważaj
display: flex
na 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>
źródło
Dodaj wyraźny znacznik DIV między dwoma obiektami
źródło