Why are my div margins overlapping and how can I fix it?
HtmlCssMarginsHtml Problem Overview
I don't understand why the margins of these divs are overlapping.
.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>
Html Solutions
Solution 1 - Html
I think it's a collapsed margin. Only the largest margin between the bottom of the first element and the top of the second is taken into account.
It is quite normal to don't have too much space between two paragraphs eg.
You cannot avoid that with two adjacent elements so you have to enlarge or reduce the larger margin.
EDIT: cf. W3C
> Two margins are adjoining if and only if: > > - both belong to in-flow block-level boxes that participate in the same block formatting context > - no line boxes, no clearance, no padding and no border separate them > - both belong to vertically-adjacent box edges
So there is no collapsing with float
which takes the element out of the flow.
Solution 2 - Html
Margins, in contrary to padding (which pads a specific width) is a “do this as a minimum distance”.
It won’t put that distance to all elements.
As you can see, the get in touch block bottom margin is marged to the input box. That is the margin active here. The other margin, top margin from the input, is not in effect, as it’s smaller and does not reach a block-element where it would actually push back the element. The 2 margins overlap and don’t affect one another.
Solution 3 - Html
If you can not use padding and really need for margin not to overlap, here is one 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;
}
Please launch this snippet for 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>
Solution 4 - Html
Add a clear div tag between the two objects
Solution 5 - Html
Watch out for display: flex
on the parent 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>