MarginTop 为何影响父元素的 MarginTop
来源:互联网 发布:网络运维工程师招聘 编辑:程序博客网 时间:2024/06/11 03:50
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是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”效果。
这个“问题”……它是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。
补充:
解决方法:
1.父元素添加padding-top样式;
2.父元素添加overflow:hidden样式;
3.父元素或子元素浮动;
4.给父元素添加boarder(看需求而定);
5.为父元素或子元素绝对定位;
6.在子元素前添加子div并设置height:1px和overflow:hidden样式(如果添加的是inline-block元素,需要改display为block)。
原理:margin折叠(Collapsing Margins)
毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。
这里的毗邻指没有上下padding-top,padding-bottom,border-top,border-bottom,元素内容不为空。
最常见的margin折叠是
元素并列时,每个p都有上下1em的margin,但相临的p只会显示1em的间隔而不是2em。
本例中两个div是父子关系,并且没有padding-top和border-top,即父元素和子元素上边重合。也属于毗邻的范畴,所以也出现了margin折叠,本例显示了子元素的margin-top;
详细的margin重合计算可以参考这篇:http://www.cr173.com/html/17041_1.html
避免这个问题只要使条件不符合或者隐藏margin:给父元素加padding/border,父子间添加其他元素,或者设置为浮动,定位都行。
- MarginTop 为何影响父元素的 MarginTop
- MarginTop 为何影响父元素的 MarginTop
- margintop
- 设置view 的MarginTop
- javascript操作div中的marginTop
- JQuery的animate的marginTop自增动画在FF下的另类表现
- 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图
- 子元素的margin-top为何会对父元素造成影响
- 子元素margin-top为何会影响父元素?
- 子元素margin-top为何会影响父元素?
- css中子元素margin影响父元素的解决方法
- 解决子元素滚动影响父元素的JS
- 关于子元素的margin-top影响父元素
- 父元素与子元素的点击事件影响问题
- css父元素透明度(opacity)对子元素的影响
- 清除浮动造成的父元素高度坍塌的影响
- 子元素margin-top影响父元素
- .父元素透明不影响子元素
- java.lang.IndexOutOfBoundsException: Index: 4, Size: 4
- 数组和运算符简介
- 妙趣横生:aspx删除数据
- spring boot 使用velocity模板
- 数据挖掘之集成学习
- MarginTop 为何影响父元素的 MarginTop
- haproxy
- HDU-2191 珍惜现在,感恩生活(多重背包,二进制优化)
- anjularJs学习(一)基础知识及$http和$q服务
- HDOJ HDU 1110 Equipment Box
- Python核心编程v2.0 第12章习题答案
- linux中开机自动启动服务的三种方式
- 关于git push命令报错
- 代码规范性改进