CSS 边距和绝对属性答案

【问题标题】：CSS Margin and Absolute propertyCSS 边距和绝对属性
【发布时间】：2012-08-13 15:34:48
【问题描述】：

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

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

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

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;
}

我无法理解为什么将位置设置为绝对限制#inner2 div 的宽度。
由于#inner1 div 没有绝对属性，所以它没有上边距。我无法理解这一点。请解释一下。

这里是输出：jsFiddle

【问题讨论】：

问题是什么？您的预期结果是什么？
我希望我的 inner1 div 应该具有我在 CSS 中指定的顶部边距。但我得到了一些不同的东西。使用绝对属性修复了这个所以我想知道为什么？

标签： css margin css-position

【解决方案1】：

问题1：我不明白为什么将位置设置为绝对会限制inner2 div的宽度。

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

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

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

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

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

【讨论】：

您好 abhinav，感谢您的回答。我完全理解了 Q1 的答案。您能否解释一下，从文档流内部 div 永远不知道它在外部 div 内部，但根据文档流内部 div 进入外部 div，而且为什么设置外部 div 的边框可以解决这个问题？请至少给我一些链接...顺便说一句，非常感谢。
@blunderboy，实际上这就是 Collapsing Margin 的情况。以下是一些链接：reference.sitepoint.com/css/collapsingmargins、researchkitchen.de/blog/archives/…、seifi.org/css/…

【解决方案2】：

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

看到这个

absolute vs relative position width & height

【讨论】：

【解决方案3】：

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

【讨论】：