CSS代码如何叠加外边距

本篇内容主要讲解“CSS代码如何叠加外边距”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS代码如何叠加外边距”吧!

代码如下：

<style type="text/css">   
        p{   
            color: black;   
            background: #ccc;   
            margin-top: 50px;   
            margin-bottom: 30px;   
            height: 50px;   
            border: 1px solid red;   
        }   
</style>

第一段的下外边距与第二段的上外边距相邻，你可能认为它们之间的外边距是80px，但实际的间距却是50px。像这样的上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。因此，在这里，第二段较宽的上外边距就会碰到第一段的边框。也就是说，较宽的外边距决定两个元素最终离多远。这个过程就是外边距叠加。

效果如下：

css的选择器有哪些

css的选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

到此，相信大家对“CSS代码如何叠加外边距”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！