3

可能重复：
当 DIV 为空时，CSS 属性被传递给父元素

我是 CSS 布局设计的新手。

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

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

[演示.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>

[演示.css]

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

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

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

在此处输入图像描述

发生这种情况的原因是什么以及如何更正样式？

4

4 回答 4

1

改变margin-toptopadding-top会做你想做的事。

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

存在其他解决方案，但它们都有点 hacky：

  • 应用位置：相对于孩子并将 更改margin-top为 amargin-bottom并应用top: 20px;；

  • 在内框之前创建一个包含一些内容的元素（  可以在这里使用）height: 0;和overflow: hidden;;

  • 为元素的背景设置一个border-top: 1px solid transparent或相同的颜色（本例中，注意边框加到对象的高度；

  • 等等...

于 2012-07-08T16:48:19.327 回答
0

您可以添加position: relative到#box1 和position: absolute#box2。

看这个例子

CSS 职位解释

于 2012-07-08T16:29:07.133 回答
0

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>​

如果您将外框保持为空（无文本节点），那么它正在执行此行为，老实说我不明白为什么，但我在这里找到了它为什么这样做，它被称为collapsed margin并且我已经添加border:solid transparent 1px;以解决问题但或者，您也可以对外部使用填充 DIV。这也是关于SO的答案。

演示。

于 2012-07-08T16:33:32.330 回答
0

Chris Coiyer 的这篇文章很好地解释了 box-sizing。理解这一点会对你有所帮助。

于 2012-07-08T18:43:23.900 回答