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