简易的CSS叠加外边距示例

日期:2021-01-20 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

竖直方位上的外边距会叠加,假定有3个段落,前后左右相接,并且都运用下列标准:

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2.         p{   
  3.             colorblack;   
  4.             background#ccc;   
  5.             margin-top50px;   
  6.             margin-bottom30px;   
  7.             height50px;   
  8.             border1px solid red;   
  9.         }   
  10. </style>  

第1段的下外边距与第2段的上外边距邻近,你将会觉得它们之间的外边距是80px,但具体的间隔确是50px。像这样的左右外边距相遇时,它们就会互相重合,直至1个外边距碰到另外一个元素的边框。因而,在这里,第2段较宽的上外边距就会碰到第1段的边框。也便是说,较宽的外边距决策两个元素最后离多远。这个全过程便是外边距叠加。