<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】#65. Valid Number

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Validat ...

  2. 【算法导论】最小生成树之Kruskal法

    在图论中,树是指无回路存在的连通图.一个连通图的生成树是指包含了所有顶点的树.如果把生成树的边的权值总和作为生成树的权,那么权值最小的生成树就称为最小生成树.因为最小生成树在实际中有很多应用,所以我们 ...

  3. 【Qt编程】Qt版扫雷

    学习要学会举一反三.在以前的<用matlab扫扫雷>一文中,我用matlab简单的编写了一个扫雷小程序.当然,与Windows自带的扫雷程序自然是不敢相提并论.今天我就用c++来写个扫雷程 ...

  4. 命令行界面的C/S聊天室应用 (Socket多线程实现)

    命令行界面即在Eclipe控制台输入数据. 服务器端包含多个线程,每个Socket对应一条线程,该线程负责读取对应输入流的数据(从客户端发送过来的数据),并将读到的数据向每个Socket输出流发送一遍 ...

  5. 基于ARM-contexA9-Linux驱动开发:如何获取板子上独有的ID号

    每个CPU,都有它固定的ID号,ID号就是这个CPU唯一的标识,它可能隐含着CPU的生产日期,版本号,型号等等,那么,在我们的这款友善之臂Tiny4412的板子上,我的这个CPU的ID又是多少呢?从我 ...

  6. 带三方登录(qq,微信,微博)

    实现QQ.微信.新浪微博和百度第三方登录(Android Studio) 前言:  对于大多数的APP都有第三方登录这个功能,自己也做过几次,最近又有一个新项目用到了第三方登录,所以特意总结了一下关于 ...

  7. PS图像特效算法——百叶窗

    这个只要设置好条纹的宽度和条纹的间隔,建立一个遮罩层,等间隔的对原图进行等间距的遮罩. clc; clear all; Image=imread('4.jpg'); Image=double(Imag ...

  8. 11个超棒的iOS开发学习网站

    原文:11 Insanely Great iOS Developers Sites 永不止步地向他人学习 我相信,要想从一个"还不错"的人变成一个卓越的人,我们需要不停地向他人学习 ...

  9. JNI技术简介-android学习之旅(92)

    分为5步 !!!注意本地方法是java中的方法,本地函数指的是c语言中的对应函数 1.在java类中声明本地方法 2.使用javah命令,生成包含jni本地函数原型的头文件 3. 实现jni本地函数 ...

  10. LeetCode(41)-Rectangle Area

    题目: Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defin ...