子元素margin-top后，跟父元素一起下沉

在一个<div>元素中嵌套一个子div，同时设置子div的margin-top，结果，父元素和子元素一起下沉，留出来个空白区域。

原因就是：

       一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

解决方法：

给父元素添加border或border-top。

给父元素添加padding或padding-top。

给父元素设置overflow:hidden.

将margin-top,变为padding-top.

注意margin-top,margin-bottom,padding-top,padding-bottom设置百分比时，百分值是按照父容器的宽设置而不是高度。

writing-mode：vertical-lr;设置为纵向书写时，百分比按照高度设置。