Margin-Top in a Nested Div

.header {  width: 100%;  height: 110px;  text-align: center;  background-color: yellow;  display: inline-block;}.title {  margin-top: 25px;  font-size: 30px;}

<div class="header">  <div class="title">Title</div></div>

Margin of inner Div affects outer div

Seems like it's a "Margin collapsing" problem. Check the DEMO

I've added padding: 1px 0;

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Just found this: margin-top in a nested div

Adjusting the margin-top of a div inside of a container div pushes both the inner div and container div down from body

This is caused by collapsing margins. If two elements have touching margins, then the margins merge. There is a great explanation of this here. Go to the section called Collapsing Margins Between Parent and Child Elements.

Here are three different solutions.

One is to add overflow: auto to the container. This changes the BCF (Block Formatting Context). This technique is described in more detail here.

#container {
    height: 100%;
    background-color: black;
    /* Add oveflow auto to container */
    overflow: auto;
}

http://jsfiddle.net/bzVgV/20/

A second is to use padding on the container instead of a margin on logo. This takes margins out of the equation.

#container {
    height: 100%;
    background-color: black;
    /* Use padding on container instead of margin on logo */
    padding-top: 30px;
}

http://jsfiddle.net/bzVgV/18/

A final solution is to make the margins no longer touch. You can do this by adding a 1px padding to the parent.

#container {
    height: 100%;
    background-color: black;
    /* Now margins of container and logo won't touch */
    padding-top: 1px;
}

http://jsfiddle.net/bzVgV/21/

Nested divs and margins not working as expected

Make sure the parent (header) has : overflow: hidden;

Elements with overflow set to anything other than visible (They do not collapse margins with their children.)

http://reference.sitepoint.com/css/collapsingmargins

Inner div with margin-top pushes down the outer div

Replacing margin-top on the inner with padding-top on the outer will fix it. As will putting overflow:hidden or overflow:auto on the outer although those might cause unnecessary clipping or scroll bars.

nested boxes pushed down by margin-top

Change the margin-top to padding-top will do what you want.

This is a know issue in many browsers.

When the first child of an element has a margin-top (no content before it) the margin overflow the top of the parent element and pushes it like in your case.

Other solutions exists, but all of them are a bit hacky:

• Apply a position: relative to the child and change the margin-top to a margin-bottom and apply top: 20px;;

• Create an element before the inner box with some content (  can be used here) with height: 0; and overflow: hidden;;

• Set a border-top: 1px solid transparent or the same color of the background of the element (in this case, pay attention that the border is added to the height of the object;

• and so on...

How do nested vertical margin collapses work?

Two-ish rules to remember:

1. If margins touch, they collapse.
2. Nested items "snuggle" if only margin separates them.
3. Elements outside the "Flow" behave differently. That is, this behavior does not apply the same to floated, or position:fixed, or position:absolute elements.

So for this HTML (nested divs) :

<div id="outer"> 
    <div id="inner">
        A
    </div>
</div> 

and this initial CSS:

#outer {
    margin-top:10px;
    background:blue;
    height: 100px;
}
#inner {
    margin-top:20px;
    background:red;
    height: 33%;   
    width: 33%;
}

The margin collapses to the max of the touching margins and the nested div "snuggles" to the start of the container, like so: (See it at jsFiddle.)

But, the moment the two margins are separated -- by a border or by preceding content in the container, for example -- the margins no longer touch, so they no longer collapse.

EG, just a little, non-breaking white-space , like so:

<div id="outer"> 
    <div id="inner">
        A
    </div>
</div>

kills the collapse : (See that at jsFiddle.)

Using a border, instead of leading text : (Fiddle)

---

Related Topics