Question

可能重复：
CSS properties being passed up to the parent element when the DIV is empty

我是CSS布局设计的新手。

我现在想做的是，我想制作两个Div盒子，一个嵌套在另一个里面。无论如何，我的问题是我设置到内盒的上边距没有按照我想要的方式运行。

请以下面的脚本部分为例：

[demo.html]

<html>
    <header>
        <title>Mock-up page</title>
        <link href="stylesheets/demo.css" rel="stylesheet"  type="text/css">

    </header>
    <body>
        <div id="box1">
            <div id="box2">div 2</div>
        </div>
    </body>
</html>

[demo.css]

#box1{
    width: 300px;
    height: 300px; 
    background-color:#0000FF;       
}

#box2{
    margin-top: 30px;
    background-color:#008000;
}

它产生的效果是它只将外框30px从身体标签（图片中的左侧）向下推，这不是我预期的（图片中的右侧）。

enter image description here

为什么会发生这种情况以及如何纠正造型？

Answer 1

将margin-top更改为padding-top可以执行您想要的操作。

这是许多浏览器中的一个已知问题当元素的第一个子元素具有margin-top（之前没有内容）时，边距溢出父元素的顶部并按照您的情况推送它。

存在其他解决方案，但所有这些解决方案都有点hacky：

申请职位：相对于孩子，并将margin-top更改为margin-bottom并申请top: 20px;;
在内框之前创建一个元素，其中包含height: 0;和overflow: hidden;的一些内容（此处可以使用）;
设置元素背景的border-top: 1px solid transparent或相同颜色（在这种情况下，请注意边框被添加到对象的高度;
依旧......

Answer 2

您可以将position: relative添加到＃box1，将position: absolute添加到＃box2。

请参阅this example

CSS Positions Explained

Answer 3

CSS

#box1{
    display:block;
    width: 300px;
    height: 300px; 
    background-color:#0000FF;
    border:solid transparent 1px;    
}

#box2{
    margin-top: 30px;
    background-color:#008000;
}

<强> HTML

<div id="box1">
    <div id="box2">div 2</div>
</div>

如果你把外框保持为空（没有文本节点），那么它正在做这种行为，说实话，我不明白为什么，但我发现它here为什么会这样做，它被称为{{ 1}}我已添加collapsed margin以解决问题但您也可以使用填充 border:solid transparent 1px;。这也是SO的答案。

Demo.

Answer 4

Chris Coiyer的这句article在解释盒子大小方面做得很好。了解这将有助于你。

嵌套框由margin-top向下推

4 个答案: