子元素的margin-top属性传递给父元素的问题

来源：互联网发布：暴雪什么游戏支持mac 编辑：程序博客网时间：2024/04/28 07:47

说实话，这个问题时常困扰我，不过每次解决之后，都没有深究。
额，深深的鄙视一下自己。

<style>        div.parent{background: #FF92D5;height:200px;margin-top: 0;}        .child{height: 40px;margin-top: 40px;background: green;}</style><body>    <div class="parent">                <div class="child"></div>            </div></body>

对于这样的一段代码，我们期待的效果是,child的顶部距离parent 40px:

这里写图片描述

但是，很不幸，结果是这样的：

这里写图片描述

Child距离父div的margin仍然是0，反而parent顶部距离自己的父元素40px.

解决办法:
1、修改父元素的高度,给父元素加上padding-top:40px;
这是我常用的方法，但是总是感觉解决了问题，但是没有抓到本质。
2、为父元素添加overflow:hidden
3、为父元素添加border
4、为父元素或者子元素声明绝对定位。
5、为父元素或者子元素声明浮动
推荐前三种解决方法，因为没必要因为这个去修改元素的定位或者是浮动

问题和解决方法已经说完了，那么造成这种情况的原因是什么呢？
嵌套的元素也共享Margin
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

1 0