css - CSS 边距和绝对属性

Question

我想在我的代码中使用边距，但我有一些问题。请看：

<div id="outer">
<div id="inner1">
    Margin not coming from top (not absolute)
</div>

<div id="inner2">
    Div has absolue prop
</div>

​</p>

CSS代码是：

#outer {
    margin: 100px;
    background-color: green;
    height: 300px;
    widht: 400px;
}

#inner1 {
    margin: 10px;
    background-color: red;
}

#inner2 {
    position: absolute;
    margin: 20px;
    background-color: blue;
}

​</p>

1. 我无法理解为什么将位置设置为绝对会限制#inner2div 的宽度。

2. 由于#inner1div 没有绝对属性，因此它没有顶部的边距。我无法理解这一点。请解释。

这是输出：jsFiddle

Answer 1

设置 position:absolute从文档结构的正常流程中删除有问题的元素。因此，除非您明确设置宽度，否则它不会知道宽度。如果这是您所追求的效果，您可以明确设置宽度..

看到这个

绝对位置 vs 相对位置宽度和高度

Answer 2

问题 1：我无法理解为什么将位置设置为绝对会限制 inner2 div 的宽度。

将位置设置为inner2 div的绝对位置，只要文本就自动获取宽度。将位置设置为inner2 div的相对位置，获取外部div的宽度。

所以如果你想要绝对定位，还要设置inner2 div的宽度。

问题 2：由于 inner1 div 没有绝对属性，因此它没有距顶部的边距。我无法理解这一点。请解释。

从文档流中，您的内部 div 永远不知道它在其他 div（外部）内部，将边框或位置设置为外部 div 的绝对值可以解决此问题。

小提琴http://jsfiddle.net/C7dE2/20/

Answer 3

您应该使用绿色 div 的padding-top属性 -#inner1设置margin-top为高值只会将整体#outer进一步推低！