`
默默的小熊
  • 浏览: 227495 次
社区版块
存档分类
最新评论

外边距叠加

 
阅读更多

    外边距叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混要。简单的说,当两个或更多的垂直外边距相遇时,他们将形成一个外边距。这个外边距高度等于两个发生叠加的外边距的高度中的较大者。

    当一个元素出现在另一个元素上面时,第一个元素的底外边距与第二个元素的顶外边距发生叠加。
    当一个元素包含在另一个元素中时,外层的顶和底外边距分别将于内层的顶和底边距叠加。

    外边距甚至可以与本身发生叠加。假设有一个空元素,他有外边距,但是没有边框或内边距,在这种情况下,顶外边距将和底外边距碰到一起,就发生叠加了。

    外边距,初看起来比较奇怪,但是它实际上有重要的意义。以由几个段落组成的典型文本为例。第一个段落上面的空间等于段落的顶外边距。如果没有外边距叠加,后续所有段落之间的空间将是相邻顶外边距和底外边距的和。这意味着段落之间的空间是页面顶部的两倍。

    只有普通文档流中块框的垂直外边距才发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。

分享到:
评论

相关推荐

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

    今天谈谈CSS外边距叠加的问题,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。  在进行CSS网页布局时会遇到许多奇怪的问题,这些问题可能是浏览器的bug,也可能是我们对CSS属性不够了解,虽然...

    简单的CSS叠加外边距示例

    垂直方向上的外边距会叠加,假设有3个段落,前后相接,而且都应用以下规则: CSS Code复制内容到剪贴板 <style type=text/css> p{ color: black; background: #ccc; margin-top: 50px; margin-...

    如何解决外边距margin叠加的问题探讨

    两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠,那么如何使元素上下margin不折叠呢?下面的方法或许对大家有所帮助

    css入门笔记

    2、外边距margin 6、背景颜色 1.背景色 属性:background: 取值:颜色 2.背景图片 属性:background-image:url(); 取值:url() 3.背景图像平铺 属性:background-repeat 取值: 1.repeat 默认值,...

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

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

    使用HTML开发商业网站-CSS3高级特性课件.pptx

    外边距属性 内边距属性 背景属性 定位属性 布局属性 元素宽高属性 CSS高级特性 定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。为了体验CSS优先级,首先来看一个具体的例子,其...

Global site tag (gtag.js) - Google Analytics