Margin-Top Push Outer Div Down

Margin-Top push outer div down

put overflow:auto in the parent div

see more in this link

CSS margin-top on inner div pushing parent div down

Instead of a margin-top on the child, you should use a padding-top to the parent.

UPDATED (as a reaction on your comment)

A margin needs something to bounce on. Since the parent div has nothing to bounce on, it will bounce on the element above it. Therefor you should use padding.

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.

Margin-top pushes entire div down rather than just single element

As War19ck recommends inside the comments to your question, you should position the child element (.link) absolute to its parent (.background):

.link {
position: absolute;
background: url( no-repeat;
width: 384px;
height: 51px;
border:1px solid red;


  • I removed the padding!
  • You already set the parents position to relative (required)


margin from heading pushes div down

Try adding overflow:auto to the parent element.

CSS: Margin-top when parent's got no border

You can also use overflow:hidden. Using the overflow attribute on a parent element will also clear inner floats making clear:both not necessary.

Top margin pulls top element

Set the overflow to auto on the outer element. You're seeing collapsing margins in your example

Parent and first/last child - If there is no border, padding, inline
part, block formatting context created, or clearance to separate the
margin-top of a block from the margin-top of its first child block; or
no border, padding, inline content, height, min-height, or max-height
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.

.container {  background: red;  height: 500px;  overflow: auto;}
.inner { margin-top: 100px; height: 50px; background: yellow;}
Why there is white section in here ??<div class="container">  <div class="inner"></div></div>

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

Related Topics

Leave a reply