给子盒子margin-top,自身在父盒子中未发生下移,反倒是父元素向下移动




    
    子盒子在父盒子垂直居中
    


    


        

    


给子盒子margin-top,自身在父盒子中未发生下移,反倒是父元素向下移动_第1张图片

原因:

1、当一元素包含在一元素之中,如果他们之间没有填充或者边框分隔,那么他们的顶或底会发生会发现折叠

2、只有普通流中的垂直边框会发生折叠,浮动框或者绝对框或者行内框之间边界不会重叠

解决办法:

1、给父盒子添加padding(常用)

2、给父盒子添加border(可用)

3、给父盒子或者子盒子添加浮动(可用)

4、给父盒子或者子盒子添加绝对定位(可用)

5、给父盒子添加overflow:hidden(完美)

你可能感兴趣的:(给子盒子margin-top,自身在父盒子中未发生下移,反倒是父元素向下移动)