元素不会移动

我有一个div中的元素，我在给一个margin-top时遇到了一些问题。元素不会移动

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

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

#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; 
}

来源

2013-01-12 user1749428

您可以在CSS中使用'position：absolute;'或按照Mooseman在答案中的建议;添加填充到父div。 – hjpotter92

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

如果没有边框，填充，内嵌的内容，或者间隙块的上边距与它的第一个子块的边距，或无边框，填充，内嵌的内容，高度分离，最小高度或最大高度将块的边缘底部与其最后一个孩子的边缘底部分开，然后这些边距将折叠。折叠后的保证金最终在家长之外。

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

如果你真的想边距的子元素存在，无论是这些增加的会为你做它：

#competeinfo { 
    border: 1px solid transparent; 
}

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

或者

#competeinfo { 
    overflow: hidden; 
}

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

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

来源

2013-01-12 15:34:44 cimmanon

谢谢 - 随着“溢出：隐藏”解... – user1749428

对于CSS盒模型是如何工作的，检查W3C

要解决你的问题，你有两个选择：

使用保证金，正如你所说的，但在圈子前添加一些内容。例如。 jsFiddle
使用padding-top在#completeinfo而不是margin-top。例如。 jsFiddle

来源

2013-01-12 15:31:01 newtron

元素不会移动

回答

相关问题