简单的CSS叠加外边距示例

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

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

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2.         p{   
  3.             colorblack;   
  4.             background#c;   
  5.             margin-50px;   
  6.             margin-bottom30px;   
  7.             height50px;   
  8.             border1px solid red;   
  9.         }   
  10. </style>  

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


Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by