面试题:margin的兼容问题?或者叫如何解决margin值得穿透问题或者margin-top的传递问题?(只有上边距)

1,307 阅读1分钟

如果一个父盒子里面写了一个小盒子,然后如果父盒子没有border-top也没有padding-top,当我们给子盒子设置margin-top的时候,父盒子会跟着子盒子一起向下移动,

三种解决办法?

  • 父盒子设置overflow:hidden;
  • 不给子盒子设置margin-top,只用给父盒子设置padding-top,咱们可以同样达到效果
  • 给父盒子设置一个border-top:1px solid,给子盒子加margin-top;设置一个上边框,就可以解决,如果不想要颜色,可以设置成一个透明色,transparent

第一种方法?

第二种方法?
第三种方法?