CSS 外边距合并。
<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 外边距合并。的更多相关文章
- CSS外边距合并的几种情况
CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...
- css外边距合并和z-index的问题
参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...
- CSS外边距合并&块格式上下文
前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...
- CSS外边距合并(塌陷/margin越界)
原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...
- CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
- CSS外边距合并问题
今天无意中碰到了外边距合并的问题,于是便研究了一下.这里做个笔记. 所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. ...
- CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- CSS min-height不能解决垂直外边距合并问题
垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
随机推荐
- 常用Petri网模拟软件工具简介
常用Petri网模拟软件工具简介 首先要介绍的的一个非常有名的Petri 网网站--Petri Nets World: http://www.informatik.uni-hamburg. ...
- Android源码浅析(二)——Ubuntu Root,Git,VMware Tools,安装输入法,主题美化,Dock,安装JDK和配置环境
Android源码浅析(二)--Ubuntu Root,Git,VMware Tools,安装输入法,主题美化,Dock,安装JDK和配置环境 接着上篇,上片主要是介绍了一些安装工具的小知识点Andr ...
- Material Design之RecyclerView的使用(一)
Android 5.0开始就推荐使用Material Design这个设计语言,本文开始就逐一讲解Material Design中控件的使用.本章主要讲解RecyclerView,期中会带有ToolB ...
- mongodb系列之--mongodb 主从配置与说明
一.为什么要配置mongodb的主从: 1.做主从,可以说是做数据的备份,有利于故障的恢复 2.做主从,可以做到读写分离,主节点负责写操作,从节点负责读操作,这样就把读写压力分开,保证系统的稳定性. ...
- cocos2d 从v1.x升级到v2.x需要注意的几个地方
首先v1.x一些CCNode定位函数实现的有问题,导致返回的CCPoint的x坐标不正确(超出320后无变化),怀疑是其对屏幕旋转判断的不正确;而且这种现象在iOS 7.1之前的模拟器中运行都正常,在 ...
- C++中的new/delete
不同于C语言中的malloc/free是库函数,C++语言中的new/delete是运算符,而不是库函数. new/delete执行流程 我们经常会接触到的是new/delete operator(就 ...
- 做自己的软件的Gallery(一)
先上效果图: 如图,android默认也有Gallery,很多软件在调用时,都是使用自己的Gallery,一方面好维护,另外一方面可以做优化.要做成以上样式,图片加载类起至关重要,一不小心,就好OOM ...
- Mina源码阅读笔记(四)—Mina的连接IoConnector1
上一篇写的是IoAcceptor是服务器端的接收代码,今天要写的是IoConnector,是客户端的连接器.在昨天,我们还留下一些问题没有解决,这些问题今天同样会产生,但是都要等到讲到session的 ...
- PHP获取指定地区的天气
在开发网站的时候用到天气查询,由于是基于Wordpress的 所以有很多限制,先建一个[weather.php]的文件,然后看代码: <?php //获取天气 $url = 'http://m. ...
- getContext在谷歌浏览器中,使用时要先加载canvas对象,否则会提示'getContext is null'
<body> <canvas id=" style="border:1px solid #c3c3c3;"> Your browser does ...