之前遇到过嵌套div设置margin-top不生效的情况,一直没去研究,今天又遇到了,查阅资料得知原因,并不是margin-top没生效,只是当外层容器跟内层容器之间没有别的元素的时候,内层容器的margin-top会作用在外层容器上。
解决办法如下:
1、在父层div加上:overflow:hidden。
2、把margin-top外边距改成padding-top内边距。
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
4、让父元素生成一个BFC:
- float: left/right
- position: absolute/fixed
- display: inline-block/table-cell(或其他 table 类型)
- overflow: hidden/auto
- 父层div加:position: absolute;