23
2018
08

css的margin-bottom或margin-top无效的解决方法

css中margin-top是设置容器的外间距了距离了,但有朋友会发现div嵌套后,margin-top或者margin-bottom失效了,下面来看看此问题解决办法。

设计页面的时候遇到一个神奇的问题,下面是html的代码

<body>

   <div class="ccc">

      <div class="ddd ">

      </div>    

   </div>

</body>

此时我设置子容器ddd的样式:

.ddd{

   margin-top:30px; 

}

发现margin相对的父容器搞错了,找到body去了,成了相对于body来设置margin,此时设置了ccc 的高度和宽度都没效果,让我抓狂不已,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

原文链接:https://www.qiquanji.com/post/6971.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。