垂直外边距叠加问题

无论是标准盒子模型还是ie盒子模型，两个相邻或包含的元素的垂直外边距会产生叠加的效果，从而影响我们想要的布局效果。

如下结构，我们想要文本内容与容器元素间有20个像素的外边距，容器元素自身也有10个像素的外边距

<div class="wrapper" style="width: 300px; margin: 10px; background: red;">
        <p class="content" style="margin: 20px; background: yellow;">
            We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and
        </p>
    </div>

浏览器渲染结果却是

    

p元素与容器元素的垂直外边产生了叠加，而没有padding和border的容器元素的高度为包含的子元素的顶部和底部边框边缘之间的距离，因此子元素的垂直外边距就突出到了容器元素的外部。解决垂直外边距叠加的办法是对容器元素添加较小的（常用1px）内边距或边框，这样外边距不再产生叠加，而容器元素的高度就是包含元素的顶部和底部外边距之间的距离了

<div class="wrapper" style="width: 300px; margin: 9px; background: red; padding: 1px;">
        <p class="content" style="margin: 20px; background: yellow;">
            We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and
        </p>
    </div>

　　

 

转载于:https://www.cnblogs.com/qingranEvent/p/6589382.html