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

WBOY
Release: 2016-06-24 11:30:31
Original
1022 people have browsed it

子元素的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>
Copy after login

 

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

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

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

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template