微学网

热门关键词:   as  thinkphp  ecshop  www.ymwears.cn  商务通  xxx
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

margin-top失效及几种解决办法

发布时间:2020-08-01 来源:未知 点击:

当两个空的块级元素嵌套时,如果内部的块设置有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则是严格遵守规范的。      


这就是微学网-程序员之家为你提供的"margin-top失效及几种解决办法"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14041.html

上一篇:css设置透明度的方法 文字不跟随透明

下一篇:没有了

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

电脑版 | 移动版