简单的CSS叠加外边距示例

前端  /  管理员 发布于 7年前   189

垂直方向上的外边距会叠加，假设有3个段落，前后相接，而且都应用以下规则：

CSS Code复制内容到剪贴板

1. <style type="text/css">   
2.         p{   
3.             color: black;   
4.             background: #ccc;   
5.             margin-top: 50px;   
6.             margin-bottom: 30px;   
7.             height: 50px;   
8.             border: 1px solid red;   
9.         }   
10. </style>  

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