Question

I have a div that contains a link:

<div id="like_bar"><a href="#" onclick="return false;" id="like"></a></div>

With some CSS:

#like_bar{
    width:140px;
    height:26px;
    background:url('bar.jpg');
}
#like{
    display:block;
    width:20px;
    height:20px;
    margin:3px 36px;
    background:url('mini_img.png');
}

The link is placed at the top of the bar and the margins on the link are applied to the bar.
This is annoying.

---

Could someone explain these collapsing margins, how to avoid them and what they’re used for.

Answer 1

There are many ways to “fix this”.

Perhaps the easiest for you would be this:

#like_bar {
    overflow: hidden
}

Other ways include:

• Add some padding
• Add a border (even border: 1px solid transparent is enough)
• float the element
• position: absolute
• And, like in the snippet above, set overflow to a value other than the default of visible.

---

You also asked:

what they’re used for

A common use case is the <p> tag.

See: http://jsfiddle.net/thirtydot/tPaTY/

Without margin collapsing, certain things would become annoying.