首頁 > web前端 > html教學 > 子元素的margin-top作用于外层父元素解决方法_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-06-24 11:30:31
原創
1098 人瀏覽過

子元素的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
最新問題
有 CSS 父選擇器嗎?
來自於 1970-01-01 08:00:00
0
0
0
CSS中是否有父選擇器?
來自於 1970-01-01 08:00:00
0
0
0
父級的填充被黏性定位的子級忽略
來自於 1970-01-01 08:00:00
0
0
0
java - springboot新手學習
來自於 1970-01-01 08:00:00
0
0
0
spring - JavaWeb中 Service 層的事務問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板