简单的CSS叠加外边距示例
segmentfault 发布时间:2015-07-21 16:36:51 作者:trigkit4 我要评论
这篇文章主要介绍了简单的CSS叠加外边距示例,是文档样式编写中一个需要注意的地方,需要的朋友可以参考下
垂直方向上的外边距会叠加,假设有3个段落,前后相接,而且都应用以下规则:
CSS Code复制内容到剪贴板
- <style type="text/css">
- p{
- color: black;
- background: #ccc;
- margin-top: 50px;
- margin-bottom: 30px;
- height: 50px;
- border: 1px solid red;
- }
- </style>
第一段的下外边距与第二段的上外边距相邻,你可能认为它们之间的外边距是80px,但实际的间距却是50px。像这样的上下外边距相遇时,它们就会相互重叠,直至一个外边距碰到另一个元素的边框。因此,在这里,第二段较宽的上外边距就会碰到第一段的边框。也就是说,较宽的外边距决定两个元素最终离多远。这个过程就是外边距叠加。
相关文章
- 这篇文章主要介绍了解决margin 外边距合并问题 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-03
- 这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-02-27
- 外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距,本文详细的介绍了一下css外边距折叠的实现,分为3种情况,非常具有实用价值,需要的朋友可以参考下2018-10-30
- 本篇文章主要介绍了详解css边距重叠的几种解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-06
- 这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下2014-04-15
- 今天就先说说CSS的外边距吧。 围绕在元素边框的空白区域是外边距。这是W3CSchool给我们的解释。这句话看起来很模糊,说的不是那么明确2012-05-27
- 空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.2010-07-04
- 网页制作Webjx文章简介:今天谈谈CSS外边距叠加的问题,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 在进行CSS网页布局时会遇到2009-04-02
- 这篇文章主要介绍了CSS 外边距(margin)重叠及防止方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-14
最新评论