Why are my div fields overlapping and how can I fix this?

Question

I do not understand why the fields of these elements match.

.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>[phone]</span> </div><!-- contact --> <div class="search"> <form method="post" action=""> <input type="text" value="" name="s" gtbfieldid="28"> </form> </div><!-- search --> </div> 

Answer 1

I think this is a collapsed supply. Only the largest edge between the bottom of the first element and the top of the second is taken into account.

It is normal to have too much space between two paragraphs, for example.

You cannot avoid this with two adjacent elements, so you need to increase or decrease a larger margin.

EDIT: cf. W3c

Two fields are adjacent if and only if:

• both refer to block blocks in a stream that participate in the same block formatting context.
• no lines, no gaps, no gasket and no borders.
• both relate to vertically adjacent window edges

Thus, with float there is no flushing, from which the element exits the stream.

Answer 2

Fields, unlike indents (which fill a certain width), are "do this as a minimum distance".

He will not use this distance for all elements.

As you can see, the bottom field “Get contact block” is placed in the input field. This is the margin active here. The other edge, the top edge of the input, does not work, since it is smaller and does not reach the block element, where it actually drops the element. 2 fields overlap and do not affect each other.

Answer 3

I had a similar question as I answered: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 4

If you cannot use indentation and really need the fields not overlapping, 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 run this snippet to demonstrate:

 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> 

Answer 5

Watch out for display: flex on the parent.

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

Answer 6

Add an even div tag between two objects