久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

咨詢電話：
15628812133
03
2017/08

為什么有時(shí)設(shè)置的margin-top屬性不管用？

發(fā)布時(shí)間：2017-08-03 09:23:13
發(fā)布者：jiangbing
瀏覽量:
0

有時(shí)候大家可能會遇到奇怪的現(xiàn)象，盡管沒有任何的語法錯誤，但是設(shè)置的margin-top屬性不會起作用，下面就就結(jié)合代碼實(shí)例介紹一下產(chǎn)生此現(xiàn)象的原因和解決方法。

原因一：

外邊距合并margin-top屬性失效。代碼實(shí)例如下:





文匯軟件

.first{
  width:100px;
  height:100px;
  background-color:red;
  margin-bottom:60px;
}
.second{
  width:100px;
  height:100px;
  background-color:green;
  margin-top:40px;
}

從以上代碼的運(yùn)行可以看出，第二個(gè)div設(shè)置的margin-top并沒有生效，起作用的是第一個(gè)div的設(shè)置的margin-bottom，這里有個(gè)規(guī)律，那就是合并后的外邊距的高度等于外邊距的高度中的較大的一個(gè)，所以遇到此種情況可以格外注意外邊距大小的設(shè)置。

原因二：

子元素和父元素也可能會導(dǎo)致設(shè)置的子元素上外邊距失效情況，代碼實(shí)例如下:





文匯軟件

.father{
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}
.children{
  width:100px;
  height:100px;
  background-color:blue;
  margin-top:10px;
}





  

解決方法:

為父對象在相應(yīng)的外邊距方向上有邊框(border)和內(nèi)邊距(padding)，或者為overflow屬性值設(shè)置為hidden即可避免。

演示地址：http://www.geizy.cn/d/demo/top/

上一篇： 從變量看javaScript
下一篇： animate在不支持display屬性后該怎么辦？
關(guān)鍵詞:
返回列表
相關(guān)文章
相關(guān)案例
熱門文章
最新文章
濟(jì)南網(wǎng)絡(luò)公司聯(lián)系我們
聯(lián)系我們
CONTACT US
公司電話：0531-68961230 QQ:1828686598
公司地址：濟(jì)南市天橋區(qū)中凡魯鼎廣場A座20樓2009
高新技術(shù)企業(yè)編號：GR202437006411
科技中小企業(yè)編號：2024370105A8014257
關(guān)注我們濟(jì)南網(wǎng)絡(luò)公司
關(guān)注我們
FOCUS ON US
咨詢電話濟(jì)南網(wǎng)絡(luò)公司
咨詢電話：
15628812133
濟(jì)南網(wǎng)絡(luò)公司 濟(jì)南網(wǎng)絡(luò)公司 濟(jì)南網(wǎng)絡(luò)公司
山東文匯信息服務(wù)有限公司版權(quán)所有 濟(jì)南軟件開發(fā) 魯ICP備14002804號-1 公安備案號 37010502000882