css - 元素不会移动

Question

我在 div 中有一个元素，但在给出顶部边距时遇到了一些问题。

而不是移动div中的元素，我只能让它移动整个div。

这是我想给边缘顶部的紫色圆圈。

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

For how the CSS box model works, check the W3C

To fix your problem you have two options:

1. use margin, as you mentioned, but add some content before the circle. E.g. jsFiddle
2. use padding-top on #completeinfo, instead of margin-top. E.g. jsFiddle

Answer 2

由于边距折叠，边距顶部不会以您期望的方式出现在子元素上。

如果没有边框、内边距、内联内容或间隙将块的外边距顶部与其第一个子块的外边距顶部分开，或者没有边框、内边距、内联内容、高度、最小高度或最大-height 将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

来源：https ://developer.mozilla.org/en-US/docs/CSS/margin_collapsing

如果您真的希望 margin-top 存在于子元素上，这些添加中的任何一个都将为您完成：

#competeinfo {
    border: 1px solid transparent;
}

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

或者

#competeinfo {
    overflow: hidden;
}

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

否则，在父元素上填充可能是最好的选择。