最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css中margin-top或者margin-bottom失效
时间：2022-06-25 11:14:48 编辑：袖梨 来源：一聚教程网
设计页面的时候遇到一个神奇的问题，下面是html的代码
此时我设置子容器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。
相关文章
- 全是漫画下载安装app-全是漫画官方正版下载地址 08-04
- 崩坏星穹铁道混沌回忆演剧终焉满星通关指南 08-04
- picacg味网址入口 08-04
- 如鸢游春集活动佳节怪盗 dot队无闿无满不赌攻略 08-04
- 网页版邮箱登录入口及使用技巧大全 08-04
- 鸣潮新角色莫宁上线时间 鸣潮莫宁什么时候上线 08-04