子DIV块中设置margin-top时影响父DIV块位置
对子元素设置margin-top会存在一种情况
给一个div内部的div设置一个margin-top,结果它的父级跟着它一起下移了
为什么会产生这样的效果呢?这要谈到css的盒模型margin的合并问题
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
可以通过以下方式解决这个问题
- 让父级具有“包裹性”
- 将父级over-flow设为hidden
- 将父级display设为inline-block
- 将父级float或absolute
- 改变父级的结构
- 给父元素设置padding
- 给父元素设置透明border