css中margin-top或者margin-bottom失效的解决方法

来自:互联网
时间:2019-08-09
阅读:

css中margin-top是设置容器的外间距了距离了,div嵌套后,margin-top或者margin-bottom失效了,在网上打到下面的方法可以解决。geU免费资源网

设计页面的时候遇到一个神奇的问题,下面是html的代码geU免费资源网

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

此时我设置子容器homeCategory的样式:geU免费资源网

.homeCategory{
  margin-top:30px;
}

发现margin相对的父容器搞错了,找到body去了,成了相对于body来设置margin,此时设置了homeNav 的高度和宽度都没效果,让我抓狂不已,div都不听话了,调试了半天终于找到了原因。geU免费资源网

原因:geU免费资源网

在两个嵌套的div,如果外层div的父容器padding值为0,geU免费资源网

那么内层div的margin-top或者margin-bottom的值会”转移”给外层div,也就是父容器的父容器。geU免费资源网

解决办法:geU免费资源网

1:设置父容器的的样式加上:overflow:hidden。geU免费资源网

2:把对父容器的margin-top外边距改成padding-top内边距。geU免费资源网

3:给父容器div加样式, padding-top: 1px。geU免费资源网

4:给父容器div加样式,position: absolute。geU免费资源网

5:把父元素变成一个 block formating context ,下面是可选的方法geU免费资源网

a、float: left/rightgeU免费资源网

b、position: absolutegeU免费资源网

c、display: inline-block/table-cellgeU免费资源网

d、overflow: hidden/autogeU免费资源网

建议使用方法1。geU免费资源网

返回顶部
顶部