CSS空白边叠加问题解析-优快云博客

本文探讨了CSS中出现的空白边叠加现象及其解决方案。当一个元素的内边距与其父元素的外边距叠加时，会导致布局上的不一致。文章详细解释了这一现象的原因，并提供了两种有效的解决方法。

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

<body>
    <div class="box">
        <p>this pragraph has a 20px margin</p>
    </div>
</body>

.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 的填充来修复

转载于:https://my.oschina.net/u/2561199/blog/726491

常见的 css 问题