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;
    bottom:80px;
    left:33px;
    background: url(http://placehold.it/300x41) no-repeat;
    width: 384px;
    height: 51px;
    border:1px solid red;
}

Notice:

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

Fiddle

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>