margin-top导致子标签绑架父标签问题
来源:互联网 发布:r11支持5g网络吗 编辑:程序博客网 时间:2024/05/22 22:51
现象:
当两个空的块级元素嵌套时,如果内部的块设置有margin-top属性,而且父元素没有下边解决方法所述的特征,那么内部块的margin-top属性会绑架父元素(即将margin-top传递凌驾给了父元素)。
就好比一个小兵,看到上级有漏洞,就假传圣旨,利用漏洞扩张自己的权利。只要设置父元素的border(栅栏)或者padding(隔离墙),就能管住这个调皮的下属。
<div id="parrent"> <div id="box1"></div></div>
#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则是严格遵守规范的。
- 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影响父元素
- Hibernate关联关系映射_单边一对多
- linphone在android中,怎么读取音频之探索过程!终于找到它是怎么读声音的!
- CListCtrl使用
- 探索推荐引擎内部的秘密
- Linq To Object(二)
- margin-top导致子标签绑架父标签问题
- 数据库里有一条错误的数据
- 两个类互相定义为成员变量 C++
- Tortoise SVN使用方法,简易图解
- Tortoise Merge
- 下载安装Cygwin
- 从分层模型谈三种耦合
- unix文件系统模拟-操作系统课程设计
- .NET读取QQWry.Dat 纯真版ip数据库格式数据源