Home > Article > Web Front-end > 子元素的margin-top作用于外层父元素解决方法_html/css_WEB-ITnose
子元素的margin-top作用于外层父元素解决方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:311023browse
子元素的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/
Statement：
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
Previous article：如何实现网页文本原格式显示_html/css_WEB-ITnoseNext article：让input文本框文本垂直居中代码实例_html/css_WEB-ITnose