Question

我在div中有一个元素，我有一些问题给出了一个优势。

不是移动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;
}

Answer 1

有关CSS框模型的工作原理，请查看W3C

要解决您的问题，您有两种选择：

使用保证金，如您所述，但在圈子之前添加一些内容。例如。 jsFiddle
在padding-top上使用#completeinfo，而不是margin-top。例如。 jsFiddle

Answer 2

由于边距崩溃，margin-top不会以预期的方式出现在子元素上。

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或者max-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/

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

元素不会移动

2 个答案: