Question

I have an element in a div that I’m having some problems giving a margin-top.

Instead of moving the element in the div, I can only get it to move the entire div.

It’s the purple circle that I want to give a margin-top.

http://jsfiddle.net/9J8R5/

#step1 {
    width:100px;
    height:100px;
    border-radius:50px;
    background-color:#5020B8;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top:1em;
    font-size:60px;
    color:#ffffff;
    font-family:Cusmyrb;
    line-height:105px;
    text-align:center;
    padding:0;
}

Answer 1

The margin-top doesn’t appear on the child element the way you expect because of margin collapse.

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with 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 with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

Source: https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing

If you really want the margin-top to exist on the child element, either of these additions will do it for you:

#competeinfo {
    border: 1px solid transparent;
}

http://jsfiddle.net/9J8R5/5/

Or

#competeinfo {
    overflow: hidden;
}

http://jsfiddle.net/9J8R5/6/

Otherwise, padding on the parent element is probably the best choice.