盒模型——外边距重叠问题

首先创建两个盒子,一个父盒子,一个子盒子

盒模型——外边距重叠问题

盒模型——外边距重叠问题

我们想让子盒子往右下移动一段距离 于是给子盒子加上  上左外边距,但是我们会发现父盒子会随子盒子移动,父盒子具有子盒子上外边距属性。(触发BFC规则)

盒模型——外边距重叠问题

盒模型——外边距重叠问题

 

处理方法:

1.解决:

    1.给父盒子设置上边框: border-top:1px soild red   加上一个和父盒子颜色一样的上边框。

    2.给父盒子设置内边距:padding-top:1px  

    3.overflow:hidden:溢出的隐藏

2.避免:给父盒子加内边距 二不是给子盒子加外边距      (使用优先级:内边距 > 外边距)

盒模型——外边距重叠问题

盒模型——外边距重叠问题