Heim >Web-Frontend >HTML-Tutorial >子元素的margin-top作用于外层父元素解决方法_html/css_WEB-ITnose
子元素的margin-top作用于外层父元素解决方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:311088Durchsuche
子元素的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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何实现网页文本原格式显示_html/css_WEB-ITnoseNächster Artikel：让input文本框文本垂直居中代码实例_html/css_WEB-ITnose