margin-top导致子标签绑架父标签问题
来源:互联网 发布:软件源代码合同 编辑:程序博客网 时间:2024/05/16 04:06
现象:
当两个空的块级元素嵌套时,如果内部的块设置有margin-top属性,而且父元素没有下边解决方法所述的特征,那么内部块的margin-top属性会绑架父元素(即将margin-top传递凌驾给了父元素)。
就好比一个小兵,看到上级有漏洞,就假传圣旨,利用漏洞扩张自己的权利。只要设置父元素的border(栅栏)或者padding(隔离墙),就能管住这个调皮的下属。
parrent{ width:500px; height:300px; background:teal;}
box1{ width:100px; height:100px; background:aqua; margin:20px;}
解决方法:
1、设置父元素或者自身的display:inline-block;
2、设置父元素的border:1px aqua solid;(>0)
3、设置父元素的padding:1px;(>0)
4、给父元素设置overflow:hidden;
5、给父元素或者自身设置position:absolute;
6、设置父元素非空,填充一定的内容。
这个现象并不是bug,而是有理论依据的:
《on having layout》
hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范,一个盒子如果没有上补白和上边框,那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。
但值得一提的是,只有在FF和Chrome下才会出现这种margin-top绑架父节点的情况,在IE6 IE7中均显示正常,但这恰恰说明了他们是不符合规范的,而FF合Chrome则是严格遵守规范的。
0 0
- margin-top导致子标签绑架父标签问题
- margin-top导致子标签绑架父标签问题
- margin-top导致子标签绑架父标签问题
- 关于内层标签margin-top无效的问题
- div标签中的元素margin-top失效
- 父元素与子元素之间的margin-top问题
- 父元素与子元素margin-top问题
- 父元素,子元素之间的margin-top问题
- 父元素与子元素之间的margin-top问题
- margin-top在firefox中会绑架父节点的margin的分析
- margin塌陷问题:父元素与子元素之间的margin-top问题
- margin标签
- 小菜学习日记—div嵌套导致子区域margin-top失效问题(外边距合并问题)
- P标签莫名有了margin-top值的原因
- span标签设置margin-top没有效果呢?
- 子块margin-top影响父块
- 父元素跟随子元素margin-top
- 子元素margin-top影响父元素
- Redis(1)Redis介绍
- POJ 1251 Jungle Roads(最小生成树)
- 使用密码登陆Amazon EC2而不是私有密钥
- Jaxp解析XML的基本方法
- 【WG面试算法】由两个栈组成的队列
- margin-top导致子标签绑架父标签问题
- 机械臂-可操作性(manipulability)
- iOS开发-Alpha,Hidden与Opaque区别
- 如何进行Android、IOS APP的自动化测试—东舟自动化测试解决方案
- 网络流相关
- NSURLConnection笔记
- 部署maven web项目到tomcat服务器
- 内部错误:无法加载 ABAP 报表 LVBRKF0I
- NSURLSession学习笔记(三)Download Task