CSS盒模型中“内容区域”的问题~~~高分求教！！！

[wsy87217]

我有一本CSS教材，上面有一个例子用来解释发生外边距重叠的问题：
效果：

<div style="margin:10px; background:red;">
    <p style="margin:20px; background:yellow;">aaaaaaa</p>
</div>

书上的解释是：
出现这种情况（外边距叠加）是由于具有块级子元素的元素，在计算其高度的方式造成的。
如果元素没有垂直边框或内边距，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部外边距就突出到容器元素的外边。有一个简单的解决方案：通过添加一个垂直边框或内边距，外边距就不再叠加了，而且元素的高度就是它包含的子元素的顶部和底部外边距边缘之间的距离。

问题：
1、这个红字部分的“高度”，是不是就是指包含元素（div）的内容区域高度呢？
2、如果是的话，那可不可以理解成发生外边距重叠的原因就是包含元素的内容区域的高度不够？
如果是这样的话，那我给div元素的css中加上“height:200px;”，因为height属性就是给元素的内容区域赋高度。
但是还是发生了外边距重叠，这是为什么呐？

问题有点绕，而且因为我对盒子模型还不太了解，问题描述的也不太清楚，所以麻烦大家仔细的读一下，回答的稍微详细一些，写这么多不容易，谢谢大家了！：）

[孟子E章]

1,高度指的是div的高度，但它的值为p顶部和底部边框边缘之间的距离。
2，消除外边距重叠，可以使用border或者padding，如
<div style="margin:10px; background:red;border:1px solid green">
<p style="margin:20px; background:yellow;">aaaaaaa</p>
</div>
或者
<div style="margin:10px; background:red;padding:1px 0">
<p style="margin:20px; background:yellow;">aaaaaaa</p>
</div>

[Acesidonu]

1.是div的高度，等于p的高度
2.不能这么理解，使用边框或内边距来限制子元素的范围就可以消除重叠现象。

[ddcatlee]

你这本书关于内容高度和边距叠加的解释有偏差。
margin的叠加，w3c的描述是：
对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩。
比较好理解的例子是：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。

这是一种情况，相邻的元素，还包括父子元素，就像你的例子这种。
此时，实际与子元素的高度无关，而是因为父元素没有padding或者border相隔，所以子元素的margin会到父元素的内容区域之外。

不知道你看的是什么书，就你举例这段，劝你还是换本书看吧。

[wsy87217]

昨天家里网断了，谢谢大家帮忙回答！！！

[我爱小土豆]

受教了，很不错。。。。

[中微子]

1.红色部分的高度就是div内容区域的高度，而且也是p内容区域的高度，因为你没有设置div的height属性，默认情况下div的高度会缩小到正好能容下子元素；
2.即使你显式地设置了div的width，那么如果你没有给div或p设置垂直方向的border或padding，这时候即使div有足够的height来容纳p的整个高度（包括margin等），边距重合仍然会发生，是p的上margin和div的上margin重合。你不要问为什么，CSS2.1标准就是这么规定的：没有垂直border或padding隔开，那么常规流下的块级box会发生边距重合，兄弟box，父子box，甚至自身与自身也能发生边距重合。
对于这方面的知识，你可以到W3school中学一下。