margin-top css属性的意外行为

时间：2014-04-19 04:35:30

标签： html css

我面临着margin-top的非常简单的问题，它吓坏了我。我简化了我的文档以使其可读。 这是我的html文档结构

<body>
    <section>

    </section>

    <section>
        <div></div>
    </section>
</body>

这是我的CSS 

section{
    width: 100%;
    height:768px;
    background-color: red;
    border-bottom: 1px solid yellow;
    position: relative;
}

div{
    background-color:green;
    height:50px;
    width:50px;

    margin-top:0px;
}

当div的{​​{1}}为0时，它看起来像这样： enter image description here

但当我将其更改为margin-top至margin-top时，它看起来像这样：enter image description here

我无法指出如何添加空白区域。检查表明它是身体的一部分。部分实际上被推倒了。我期待那个小div相对于部分被推下来。任何人都可以解释这种疲惫的行为吗？

3 个答案:

答案 0 :(得分：1)

此处是符合您要求的小提琴http://jsfiddle.net/suriyag/UhqX9/1/ 

    section{
    position:relative;
    width: 100%;
    height:768px;
    background-color: red;
    border-bottom: 1px solid yellow;
    position: relative;
}

div{
    position:absolute; 
    top:10px;
    background-color:green;
    height:50px;
    width:50px;
  }

在您的代码中做了一些小改动

答案 1 :(得分：0)

From w3.org

  

在CSS中，两个或多个框的相邻边距（可能或   可能不是兄弟姐妹）可以组合形成单一的边缘。边距   结合这种方式据说会崩溃，并由此产生组合   保证金称为折现保证金。

现在为了防止折叠边距，您应该将overflow:auto添加到父元素。

答案 2 :(得分：0)

尝试

float: left;
如果可以

，请输入

部分标签

http://jsfiddle.net/dcTw3/2/

相关问题
最新问题