css中margin-top或者margin-bottom失效
阿新 • • 發佈：2017-06-10
text margin for lin over oat display ati tab
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。
css中margin-top或者margin-bottom失效