子元素的margin-top作用于外层父元素解决方法_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:30:31
原创
1022 人浏览过

子元素的margin-top作用于外层父元素解决方法:
有时候在设置子元素的margin-top属性的时候,本来是要作用于父元素,但是表现的结果却是父元素具有了margin-top效果,下面就通过代码实例介绍一下如何解决此问题。
代码实例如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#box{  width:200px;  height:200px;  background:red;  overflow:hidden;}#main{  width:50px;  height:50px;  background:blue;  margin-top:50px;}</style><body><div id="box">  <div id="main"></div>  </div></body></html>
登录后复制

 

上面代码实现了我们的要求,其实这个就是典型的外边距合并问题,添加overflow:hidden即可消除此现象,这里就不多介绍了,具体可以参阅margin外边距合并详解一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12696

更多内容可以参阅:http://www.softwhy.com/divcss/

 

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板