<div id = "parent">
<div id = "child">
demo
</div>
</div>
#parent {
background: red;
width: 200px;
height: 200px;
}
#child {
background: green;
width: 50px;
height: 50px;
margin-top: 50px;
}

在IE8中#child div的margin没有传递到parent,但是FF出现了这种问题。

child的margin-top传递到了parent上.

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

消除这种影响的方法:设置padding和border或设置交元素为浮动,设置overfl:hidden;可解决

w3cschool的解释   http://www.w3school.com.cn/css/css_margin_collapsing.asp

来源:http://segmentfault.com/q/1010000000366724

CSS 外边距合并。的更多相关文章

  1. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

  2. css外边距合并和z-index的问题

    参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...

  3. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

  4. CSS外边距合并(塌陷/margin越界)

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...

  5. CSS 外边距合并

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...

  6. CSS外边距合并问题

    今天无意中碰到了外边距合并的问题,于是便研究了一下.这里做个笔记. 所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. ...

  7. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  8. CSS min-height不能解决垂直外边距合并问题

    垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...

  9. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

随机推荐

  1. 【一天一道LeetCode】#53. Maximum Subarray

    一天一道LeetCode系列 (一)题目 Find the contiguous subarray within an array (containing at least one number) w ...

  2. Leetcode_35_Search Insert Position

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/43739647 Given a sorted array a ...

  3. 鹅场offer已Get,下周签约,终于能静下心来总结总结

    2015年9月20号下午,接到腾讯总部的电话,确定了offer相关信息,算是正式get了鹅场的offer,坐等下个周一周二的签约会. 心路篇 2015年2月:已经2月份了,自己在大学的时光已经来到了比 ...

  4. HTTP2概述

    HTTP/2 提供了HTTP语义的传输优化.HTTP/2支持所有HTTP/1.1的核心特征,并且在其他方面做的更高效. HTTP/2中基本的协议单位是帧.每个帧都有不同的类型和用途.例如,报头(HEA ...

  5. 在 ServiceModel 客户端配置部分中,找不到引用协定“XX”的默认终结点元素的解决方法

    今天在CRM2011中写Plugin的的时调用WCF报错,错误如下:"在 ServiceModel 客户端配置部分中,找不到引用协定"XX"的默认终结点元素.这可能是因为 ...

  6. Memcached学习笔记 — 第四部分:Memcached Java 客户端-gwhalin(1)-介绍及使用

     介绍 Memcached java client是官方推荐的最早的memcached java客户端.最新版本:java_memcached-release_2.6.1. 官方下载地址:http ...

  7. 一张图了解cocos2d坐标系

    一张图了解cocos2d坐标系 平面直角坐标系

  8. Material Design之视图状态改变

    视图状态改变是通过StateListAnimator动画集来改变View的状态的,它可以使View在不同状态下发生不同的变化,如下是在drawable目录下定义一个StateListAnimator: ...

  9. android 自定义gallerey并实现预览功能

    自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gal ...

  10. Shell Script - 追踪与debug

    [root@www ~]# sh [-nvx] scripts.sh 选项与参数: -n :不要运行 script,仅查询语法的问题: -v :再运行 sccript 前,先将 scripts 的内容 ...