子元素应该margin-top为何会影响父元素【转】
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然是CSS2.1盒模型规范……虽然很别扭,非常别扭的规定。 问题如下图,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没有Inner Div的“margin-top”属性,一切如预期。但是当Inner Div设置了“margin-top:10px”之后,它的父元素Outer Div也被撑出来一个本不该有的“margin-top:10px”效果。
Inner Div [margin-top: 10px]
Outer Div [margin: 0 auto]
HTML Demo Area
这个“问题”……它是CSS2.1的盒模型中规定的内容——Collapsing margins:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
这就是原因了。“嵌套”的盒元素也算“毗邻”,也会 Collapsing Margins。这个合并Margin其实很常见,就是文章段落元素<p/>,并列很多个的时候,每一个都有上下1em的margin,但相邻的<p/>之间只会显示1em的间隔而不是相加的2em。这个很好理解,我就是奇怪为什么W3C要让嵌套的元素也共享Margin,想不出来在什么情况下需要这样的表现。 这个问题的避免方法很多,只要破坏它出现的条件就行。给 Outer Div 加上 padding/border,或者给 Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。 更多信息,关于不同值的margin折叠后表现的计算方法等等,可自行查阅W3C的CSS2.1规范:Collapsing margins。
http://blog.csdn.net/duran1986/article/details/6930967
转载于:https://www.cnblogs.com/hejia/archive/2013/05/26/3099697.html
子元素应该margin-top为何会影响父元素【转】相关推荐
- margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
- 布局时margin会影响父元素
布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"><div class="login" ...
- 深入理解CSS之 如何使子元素撑宽 设置了 block 的父元素
深入理解CSS之 如何使子元素撑宽 设置了display: block; 的父元素 先写一个模板,晚点再吐槽 吐槽 实现原理 与 更多支持的属性 不想使父级的 块 属性消失怎么办 这种属性规则有什么作 ...
- 【疑点】当子元素全部浮动时,怎么解决父元素塌陷的问题?
[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? 参考文章: (1)[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? (2)https://www.cnblogs.com/roashley ...
- 当子元素设置position absolute的时,父元素必须设置position属性
当子元素设置position absolute的时,父元素必须设置position属性.
- 子元素的margin-top会影响父元素
---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...
- 子元素margin-top为何会影响父元素?
https://blog.csdn.net/sinat_27088253/article/details/52954688 问题如下 一段很简单的代码: css如下: <style type=& ...
- 子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
- 子元素设置position:fixed,z-index大于父元素依然被父元素盖住
在项目中遇到一个奇怪的问题,当父元素样式overflow有滚动条.borde-radius存在.position不为static时,和z-index不为auto时,子元素的position就算是fix ...
最新文章
- mysql 表分区 django_MySQL partition分区I
- 计算机 配置不过4000,台式机4000元以上免谈,非主流配置免谈
- 【Java并发编程】—–“J.U.C”:ConcurrentLinkedQueue
- 自底向上构建知识图谱全过程
- 安卓okhttp连接mysql_android中okhttp实现断点上传示例
- 前端学习(2081):三种方案对比es5没有闭包
- 计算机原理期中考试,计算机组成原理期中考试试题
- 给linux内核传递数组,数组与指针 - Linux C编程实战之路_Linux编程_Linux公社-Linux系统门户网站...
- 别找了,你要的中国民间神话故事在这里!
- 读书笔记-简单叙述对象关系
- 使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法
- C# OpenFileDialog 打开文件对话框 打开多文件对话框; 并获取其路径,文件名,扩展名/后缀名
- pytorch中的tensor以numpy形式进行输出保存
- python123手机版本_Python123
- 2021 个人成长复盘
- html+js 实现 推箱子 贪吃蛇和简单的飞机大战
- ArcGIS山脊线、山谷线和山顶点的提取(附练习数据下载)
- 阿里云服务器ECS怎么重装系统?
- 72个免费学习网站,涵盖所有,你值得拥有!【非推广】
- 定风波/三月七日——苏轼
热门文章
- 安装vim提示Depends: libpython3.5 (>= 3.5.0~b1) but it is not going to be installed的解决方法
- 解决问题:swiper动态加载图片后无法滑动
- 通过ng-change选择ng-object
- 电脑Win10系统如何进入安全模式
- mysql json字符串_mysql如何截取一个json字符串?
- 怎么把代码放图片里面进行注入_揭秘代码分层后的新世界
- c++ 传入字符串 带返回值_python的数据类型(三):字符串
- 麦轮平台的速度分解与合成
- 3D呈现transform-style(CSS3)
- 智慧城市特效(建筑颜色渐变、飞线、扫光、扫描、光墙、线路、水、道路线条、锥形标、漫游)three+shader