当大盒子套小盒子且大盒子没有内容时,想要给小盒子增加一个外边距,小盒子设置的margin-top会传递给大盒子,使两个盒子一起下沉。
示例:
此时还未添加margin-top可以看到父元素和子元素都没有上边距,但是当我想给子元设置一个外边距margin-top时
这时可以明显看到给子元素设置上外边距,却变成父元素上外增加了20像素的边距,这个就是margin-top的传递问题。
解决方法:
1、在父级中添加border
2、不设置子元素上外边距,转而设置父元素的上内边距。
3、给父元素设置overflow: hidden;