欢迎来到资源库(www.zyku.net)

CSS

当前位置:首页 > 网页制作 > CSS > CSS

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

时间:2017-06-10|栏目:CSS|点击:|我要投稿

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。

(资源库 www.zyku.net)

上一篇:浏览器的User Agent Stylesheet解决方法

栏    目:CSS

下一篇:CSS代码实现三角形和饼图实例

本文标题:css中margin-top或者margin-bottom失效的解决方法

本文地址:https://www.zyku.net/css/1396.html

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等内容,均由网友发表或上传并维护或收集自网络,仅供个人学习交流使用,版权归原作者所有。

如有侵犯您的版权,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

苏ICP备2020066115号-1

本网站由提供CDN加速/云存储服务