css中margin-top或者margin-bottom失效


css中margin-top是設置容器的外間距了距離了,div嵌套后,margin-top或者margin-bottom失效了,在網上打到下面的方法可以解決。

 

設計頁面的時候遇到一個神奇的問題,下面是html的代碼

<body>
   <div class="homeNav">
      <div class="homeCategory  ">
      </div>    
   </div>
</body>

此時我設置子容器homeCategory的樣式:


.homeCategory{
   margin-top:30px; 
}
發現margin相對的父容器搞錯了,找到body去了,成了相對於body來設置margin,此時設置了homeNav 的高度和寬度都沒效果,讓我抓狂不已,div都不聽話了,調試了半天終於找到了原因。

 

原因:

在兩個嵌套的div,如果外層div的父容器padding值為0,
那么內層div的margin-top或者margin-bottom的值會”轉移”給外層div,也就是父容器的父容器。

 

解決辦法:

1:設置父容器的的樣式加上:overflow:hidden。
2:把對父容器的margin-top外邊距改成padding-top內邊距。
3:給父容器div加樣式, padding-top: 1px。
4:給父容器div加樣式,position: absolute。
5:把父元素變成一個 block formating context ,下面是可選的方法
a、float: left/right
b、position: absolute
c、display: inline-block/table-cell
d、overflow: hidden/auto

建議方法1。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM