脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

简单的CSS叠加外边距示例

segmentfault   发布时间：2015-07-21 16:36:51   作者：trigkit4   我要评论
这篇文章主要介绍了简单的CSS叠加外边距示例,是文档样式编写中一个需要注意的地方,需要的朋友可以参考下

垂直方向上的外边距会叠加，假设有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。像这样的上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。因此，在这里，第二段较宽的上外边距就会碰到第一段的边框。也就是说，较宽的外边距决定两个元素最终离多远。这个过程就是外边距叠加。

2015721164051498.jpg (600×309)

相关文章

  • 解决margin 外边距合并问题

    这篇文章主要介绍了解决margin 外边距合并问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-07-03

  • 详解CSS外边距折叠引发的问题

    这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-27

  • 详解css外边距折叠（margin collapsing）

    外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下
    2018-10-30

  • 详解css边距重叠的几种解决方案

    本篇文章主要介绍了详解css边距重叠的几种解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-06

  • css控制边界与边框示例(内边距、外边距使用方法)

    这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下
    2014-04-15

  • CSS外边距合并代码

    今天就先说说CSS的外边距吧。 围绕在元素边框的空白区域是外边距。这是W3CSchool给我们的解释。这句话看起来很模糊，说的不是那么明确
    2012-05-27

  • css 空白外边距互相叠加的解决方法

    空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.
    2010-07-04

  • CSS外边距叠加的问题,CSS教程

    网页制作Webjx文章简介：今天谈谈CSS外边距叠加的问题，边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 　　在进行CSS网页布局时会遇到
    2009-04-02

  • CSS 外边距(margin)重叠及防止方法

    这篇文章主要介绍了CSS 外边距(margin)重叠及防止方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-08-14

最新评论

关注微信公众号

扫一扫