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

發(fā)布時(shí)間：2017-08-03 09:23:13

發(fā)布者：jiangbing

瀏覽量:

有時(shí)候大家可能會(huì)遇到奇怪的現(xiàn)象，盡管沒(méi)有任何的語(yǔ)法錯(cuò)誤，但是設(shè)置的margin-top屬性不會(huì)起作用，下面就就結(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并沒(méi)有生效，起作用的是第一個(gè)div的設(shè)置的margin-bottom，這里有個(gè)規(guī)律，那就是合并后的外邊距的高度等于外邊距的高度中的較大的一個(gè)，所以遇到此種情況可以格外注意外邊距大小的設(shè)置。

原因二：

子元素和父元素也可能會(huì)導(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;
}

解決方法:

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