子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
原文地址:https://www.cnblogs.com/wangxirui/p/14292875.html