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

時間 2019-11-18

標籤 css margin 或者失效欄目 CSS 简体版

原文原文鏈接

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

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

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

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

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

緣由：調試

在兩個嵌套的div，若是外層div的父容器padding值爲0，
那麼內層div的margin-top或者margin-bottom的值會」轉移」給外層div，也就是父容器的父容器。orm

解決辦法：htm

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/autoit

建議方法1。io

相關標籤/搜索