margin-top失效及解决办法
2024-08-25 12:07:27
现象:
当两个空的块级元素嵌套时,如果内部的块设置有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、设置父元素非空,填充一定的内容。
1、如果啥都不设置会是第一种效果
div style="background:black;border:1px solid red;">
<div style="width:400px;height:300px;background:red;">
<div style="width:300px;height:200px;background:green;margin:20px;">
</div>
</div>
</div>
2、设置个border,就可以达到想要的效果了
<div style="background:black;border:1px solid red;">
<div style="width:400px;height:300px;background:red;border-top:1px solid red;">
<div style="width:400px;height:300px;background:green;margin:20px;">
</div>
</div>
</div>
这个现象并不是bug,而是有理论依据的:
《on having layout》
hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范,一个盒子如果没有上补白和上边框,那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。
但值得一提的是,只有在FF和Chrome下才会出现这种margin-top绑架父节点的情况,在IE6 IE7中均显示正常,但这恰恰说明了他们是不符合规范的,而FF合Chrome则是严格遵守规范的。
最新文章
- Angular初步
- Discuz门户首页关键词和描述显示“首页”的解决方法
- 【代码笔记】iOS-推荐收听,左右两个tableView
- Windows Azure Service Bus (6) 中继(Relay On) 使用VS2013开发Service Bus Relay On
- Zip 压缩、解压技术在 HTML5 浏览器中的应用
- python 怎样使用安装库
- 【剑指Offer学习】【面试题55:字符流中第一个不反复的字符】
- 使用 trait 时报PHP Parse error: syntax error, unexpected &#39;use&#39; (T_USE) 这个错误
- CentOS6.5与XP双系统安装
- 由RGB到HSV颜色空间的理解
- HDU1506 ( Largest Rectangle in a Histogram ) [dp]
- [妙味DOM]第四课:Event-事件详解2
- linux 的tee命令
- 开始食用grpc(之二)
- input type = file 在部分安卓手机上无法调起摄像头和相册
- [Linux 性能调优] 网卡中断与CPU的绑定问题
- 1-Android开发验证码(使用第三方Mob,注册)
- [洛谷P3948]数据结构 题解(差分)
- [UE4]保存玩家列表
- Eureka集群试验的一点总结