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

外边距叠加

 
阅读更多

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

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

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

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

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

分享到:
评论

相关推荐

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

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

    简单的CSS叠加外边距示例

    CSS外边距叠加概念是指在CSS布局中,垂直方向上的相邻元素外边距会在计算时发生重叠现象,而不是简单的算术相加。这种现象在文档流中的块级元素中非常常见,尤其是在没有浮动、定位、内联块元素或表格显示类型的元素...

    css 关于空白叠加

    如果两个外边距都是百分比,叠加规则遵循具体浏览器的解释,可能结果与数值外边距叠加不同。 关于空白叠加的例子,描述中提到了两个情况: 情况一是当一个块级元素的底边外边距与另一个块级元素的顶边外边距相遇时...

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

    在CSS布局中,"空白外边距互相叠加"是一个常见的问题,它涉及到元素之间的外边距合并规则。当两个或多个块级元素的外边距相邻时,它们的垂直外边距并不简单相加,而是取其中的最大值作为最终的外边距。这在某些情况...

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

    在CSS布局中,经常会遇到块级元素垂直外边距(margin)发生叠加的问题,这通常称为margin叠加或外边距折叠。当两个或多个毗邻的块级元素垂直方向上的margin相遇时,它们会以较大者的margin值作为一个统一的margin值...

    css面试题.docx

    外边距塌陷是指两个或多个元素的外边距叠加在一起时,实际占用的空间小于每个元素的外边距之和。解决方法包括使用margin-collapse、padding、border等。 3. 清除浮动的方法 浮动(float)可以使元素脱离文档流,但...

    前端开发的面试经

    - **浮动元素外边距叠加**:IE6及以下版本中,浮动元素的外边距可能会发生叠加现象,可以通过设置`display: inline`来解决。 - **3像素文本偏移bug**:当文本与浮动元素相邻时,IE6可能会出现文本偏移的问题。 - **...

    如何理解 CSS 布局和块级格式上下文

    在CSS中,BFC主要用于解决浮动元素的包含问题,防止外边距叠加,以及实现其他高级布局效果。 首先,让我们深入了解什么是BFC。BFC的概念最早在CSS2中提出,它是一个内部元素按照特定规则进行布局的区域,这个区域不...

    css入门笔记

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

    前端开发中一些常用技巧总结

    3. **外边距叠加**:在CSS布局中,相邻元素的外边距可能会相互叠加。为了避免这个问题,可以使用透明边框或1像素的内边距来“清除”外边距,以保持元素间距的稳定。 4. **IE6的max/min宽高实现**:在Internet ...

    网页设计与制作教程(HTMLCSSJavaScript)第2版第5章CSS盒模型.pptx

    本章节主要介绍CSS盒模型的概念和应用,包括盒模型的组成部分、边框和外边距、内边距、盒模型的宽度和高度、块级元素与行级元素的区别、margin叠加问题、盒模型综合案例、盒子的定位等内容。 5.1 盒模型简介 ------...

    JS实现的N多简单无缝滚动代码(包含图文效果)

    同时,由于CSS的外边距叠加机制,需要特别注意不要在子元素上直接设置margin或padding,否则可能导致滚动出现问题,产生“跳跃”现象。正确的做法是给子元素套一个内联元素(如span),然后在这个内联元素内部设置...

    css基础3-盒子模型

    * 外边距(margin):是盒子模型的外边距区域,可以设置外边距的宽度、颜色等属性。 实际应用 实际应用中,盒子模型可以用于布局、样式设置等方面。 * 布局:可以使用盒子模型来布局网页的结构 * 样式设置:可以...

    DIV+CSS创建网页-边距属性.pptx

    在本讲座中,我们聚焦于使用DIV+CSS创建网页时涉及到的边距属性,包括内边距(padding)和外边距(margin),以及CSS3的box-shadow属性和box-sizing属性。 内边距(padding)是元素内容区域与边框之间的空间。CSS...

    行内元素的盒模型1

    然而,行内元素的外边距在水平方向上可能会与其他行内元素产生叠加效果,这取决于浏览器的实现方式和具体CSS样式。垂直方向的外边距同样不会影响元素的总体高度,它只会改变与其他元素的间距。 接下来,我们讨论`...

    理解margin塌陷和margin合并及其解决方案.docx

    在CSS布局中,margin塌陷是指在嵌套元素中,子元素的上外边距(`margin-top`)与父元素的上外边距重合时,它们不会简单地叠加,而是会合并成一个外边距。这种合并会导致子元素相对于父元素的位置不是预期中的那样。...

Global site tag (gtag.js) - Google Analytics