###1、空白边叠加问题

    
    
        
     
this pragraph has a 20px margin
    
    

.box{margin: 10px; background: #d5d5d5; width: 300px;}p{margin: 20px; background: #6699FF; border:1px solid #e33030;}

我们的本意是让 box 显示10像素的空白边，段落显示20像素的空白边

但是实际效果如图：

这里发生了两个情况：

1.段落的20px 空白边和 div 的10px 空白边叠加，形成一个单一的20px 垂直空白边。

2.这些空白边不是被 div 包围的，而是突出到 div 的顶部和底部的外边。

出现这种情况是由于具有块级子元素的元素计算其高度的方式造成的。（如果元素没有垂直边框或填充，那么他的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边突出到容器元素的外边。）

解决办法：通过添加一个垂直边框或者填充，空白边就不再叠加了，而且元素的高度就是它包含的子元素的顶部和底部空白边缘之间的距离。

方法一：

.box{margin: 10px; background: #d5d5d5; width: 300px; **padding: 1px;**} p{margin: 20px; background: #6699FF; border:1px solid #e33030;}

方法二：

.box{margin: 10px; background: #d5d5d5; width: 300px; border: 1px solid transparent;}p{margin: 20px; background: #6699FF; border:1px solid #e33030;}

空白边叠加的不多数问题可以通过添加透明的边框或1px 的填充来修复