Why Are My Div Margins Overlapping and How to Fix It

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

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.

margin not overlap when the outer explicit set height

So first things first, let's address this:

if you remove height css style on the outer div,you will find the under div is move down

This is due to Margin Collapsing:

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.

Your child margin is collapsing with the parent margin, thus the 16px margin acts as part of the parent.

However by specifying a height, you negate margin collapsing.

From the W3 Box Model spec*:

Two margins are adjoining if and only if:
Both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
The bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height

Because the margins do not collapse, the child's margin will simply attempt to expand the height of the outer div (which won't be reflected, because the parent has a strictly set height of 100px).

But wait... what if we broke the collapse some other way? Would we see the height increase by 16px?

Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them

Seems easy enough. Let's add a border to break this rule.

.outer {
  background: yellow;
  border-bottom: 1px solid black;
}

.inner {
  height: 100px;
  background: green;
  margin-bottom: 16px;
}

.under {
  background: red;
  height: 10px;
}

<div class="outer">
  <div class="inner"></div>
</div>
<div class="under"></div>

margin-top overlapping element on top

You used float property on red element.
and try to positioning other elements Depend on it.

if you want to resolve this, you must to set float:left to other box as well.

focus on float meaning

<!DOCTYPE html><html>  <head>    <title>no margin</title>  </head>  <body>    <div style="background-color: red; width: 120px; height: 160px; float:    left"></div>    <div style="background-color: blue; width: 160px; height: 120px;    margin-left: 120px; float:left"></div>    <div style="background-color: green; width: 100px; height: 100px;    clear: left; margin-top: 20px; float:left"></div>  </body></html>

Vertical margins do not overlap

That's because margin collapse only happens vertically. By setting display: inline-block, this breaks the rule since the lower element may try to stick with the element above it.

More information can be found at here.

Could you show a specific problem so we can tackle it together?. Since styling display: inline-block; with width: 100% doesn't make any sense

#contentwrap {
    margin-bottom: 50px;
    background: blue;
    width: 100%;
    height: 100px;
}
#pagenavi {
    margin-top: 50px;
    background: blue;
    width: 100%;
    height: 100px;
}

<div id = "contentwrap"></div>
<div id = "pagenavi"></div>

How to prevent margins between child divs overlapping parent div when vertically responsive

Like ckuijjer said, the vertical values are relative to the width and not to the height.

One solution would be the usage of calc.

.container div {
  height: calc(25% - 21px);
  width: 80%;
  margin: 0 auto 28px;
  background: #f00;
}

Here is an example on codepen. But the browser support isn't very good.

Margin collapse issue between div

Ideally border should prevent margin collapse. What is the mistake here? I have not applied any positioning or float.

Borders do not block margin collapse between siblings — they only block margin collapse between a parent and a child, or wherever the borders would otherwise intersect the margins.

From the spec:

Two margins are adjoining if and only if:
...
no line boxes, no clearance, no padding and no border separate them
...

Since the borders aren't actually separating or intersecting the margins between your two div elements, the margins are considered adjoining, and therefore margin collapse occurs between them as usual. The borders on your div elements would however prevent margins of your divs collapsing with those of their p children.

CSS Why do the divs overlap?

I don't see the HTML for the middle div, but position absolute means a fixed position relativ to the "frame" in your case to the div #container. So the div nav and the div middle overlap cause they ignore each other and are both positioned in relative to the div #container. you can give the divs fixed witdh and height and fixed margin so they don't collide. Example:

.nav{position: absolute;margin-top:  0;margin-left: 0;width: 300px;}.middle{position: absolute;margin-top: 0;margin-left: 300px;}

Why is the paragraph margins overlapping and being ignored?

Margins collapse.

If you have two elements each with margin: 10px, then you get 10px of space between them, which is counterintuitive if you expected 10+10 = 20px of space.

In this case, the margins collapse, but also you seem to have an issue with heights as the <p> itself does not fully contain its text. But notice how the margin stops at the exact place on the next line, as where the top of the content box is? This is how you can see that the margin has collapsed.

This is by design. If you want to avoid collapsing, try using padding instead, and no margin. Padding does not collapse like margin does.