Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why are my div margins overlapping and how can I fix it?

Tags:

html

css

margins

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>

picture

like image 371
Atif Avatar asked Oct 11 '10 13:10

Atif


People also ask

How do I stop margins overlapping?

To prevent margin collapsing between siblings, add display: inline-block; to one of the siblings (one is enough though you can add it to both).

Why are my margins overlapping?

In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly. This is an interactive element! Instead of sitting 48px apart, their 24px margins merge together, occupying the same space!

Why do div elements overlap?

This could happen for several reasons, especially when you consider the position problems with divs from one website to another. Similarly, box elements may overlap for a few reasons, ranging from positioning errors to overflow issues and simple float problems.


2 Answers

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.

like image 192
MatTheCat Avatar answered Oct 14 '22 11:10

MatTheCat


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.

like image 38
Kissaki Avatar answered Oct 14 '22 10:10

Kissaki