`

css margin 重叠

    博客分类:
  • css
 
阅读更多

转:http://www.hujuntao.com/web/css/css-margin-overlap.html

 

 

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。
但是边界的重叠也有例外情况:

1、水平边距永远不会重合。
2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下:
a、全部都为正值,取最大者;
b、不全是正值,则都取绝对值,然后用正值减去最大值;
c、没有正值,则都取绝对值,然后用0减去最大值。
注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
3、相邻的盒模型中,如果其中的一个是浮动的(float),垂直margin不会重叠,并且浮动的盒模型和它的子元素之间也是这样。
4、设置了overflow属性的元素和它的子元素之间的margin不被重叠(overflow取值为visible除外)。
5、设置了绝对定位(position:absolute)的盒模型,垂直margin不会被重叠,并且和他们的子元素之间也是一样。
6、设置了display:inline-block的元素,垂直margin不会重叠,甚至和他们的子元素之间也是一样。
7、如果一个盒模型的上下margin相邻,这时它的margin可能重叠覆盖(collapse through)它。在这种情况下,元素的位置(position)取决于它的相邻元素的margin是否重叠。
a、如果元素的margin和它的父元素的margin-top重叠在一起,盒模型border-top的边界定义和它的父元素相同。
b、另外,任意元素的父元素不参与margin的重叠,或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零,那么元素的border-top边界位置和原来一样。
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。
注意,那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响;只有在对这些元素的子元素定位时,border-top边界位置才是必需的。
8、根元素的垂直margin不会被重叠。

外边距(margin)重叠示例
外边距重叠是指两个垂直相邻的块级元素,当上下两个边距相遇时,起外边距会产生重叠现象,且重叠后的外边距,等于其中较大者。
图示:

另一个重叠现象是当一个元素包含在另一个元素之中时,子元素与父元素之间也会产生重叠现象,重叠后的外边距,等于其中最大者:
CSS 外边距(margin)重叠及防止方法
同理,如果一个无内容的空元素,其自身上下边距也会产生重叠。
CSS 外边距(margin)重叠及防止方法
外边距重叠的意义

外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。

防止外边距重叠解决方案:
虽然外边距的重叠有其一定的意义,但有时候我们在设计上却不想让元素之间产生重叠,那么可以有如下几个建议可供参考:

  1. 外层元素padding代替
  2. 内层元素透明边框 border:1px solid transparent;
  3. 内层元素绝对定位 postion:absolute:
  4. 外层元素 overflow:hidden;
  5. 内层元素 加float:left;或display:inline-block;
  6. 内层元素padding:1px;

以上建议可根据实际情况来采取。

 

分享到:
评论

相关推荐

    浅谈css margin重叠

    父子元素margin重叠 ...以上这篇浅谈css margin重叠就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。 原文地址:http://www.cnblogs.com/lj1028/p/5683253.html

    前端知识点面试题CSS基础篇1.docx

    3. **CSS Margin重叠问题** 当上下相邻的两个元素有外边距时,通常会出现margin重叠现象,即这两个元素之间的实际外边距不会是两者之和,而是取较大者。这是CSS规范中的正常行为,可以通过避免相邻或者设置`...

    CSS的margin和padding

    负`margin`是一个强大的工具,可以用来调整元素位置,实现一些特殊的布局效果,如使元素部分重叠或拉近元素间的距离。例如,负的`margin-left`可以使元素向左移动,而负的`margin-top`可以使元素向上移动。 **...

    CSS深入学习之让你认识不一样的margin

    同时,文章也提到了父子节点间可能会发生的margin重叠问题,以及解决这一问题的几种方法,比如给父元素添加border、padding、overflow设置为hidden或scroll,以及改变父元素的position属性为fixed或absolute。...

    CSS 之margin知识点(必看)

    4. margin重叠现象:margin重叠是指当多个元素的margin相遇时,它们之间并不会累加,而是取其中的最大值。重叠现象主要发生在以下几种情况: A) 相邻的兄弟元素之间的margin重叠; B) 父元素的第一个子元素的...

    CSS简单实现重叠线效果

    总的来说,CSS实现重叠线效果的关键在于巧妙地利用元素的边框、内联块级显示和负外边距。通过这种方式,我们可以轻松地在网页上创建出富有层次感的视觉分隔,提升整体设计的美观度。在实际项目中,可以根据需要调整...

    CSS margin(外边距)

    CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的(外边框)... Margin可以使用负值,重叠的内容。 Margin – 单边外边距属性 在CSS中,它可以指定不同的侧面不同的边距:

    CSS重要属性之 margin 属性知识大整合(必看篇)

    - 父子元素的margin重叠:当父元素与其子元素相邻的边距之间没有其它内容(比如边框、内边距、非空内容或可见的后代元素)时,这两个边距会折叠。 - 元素自身的margin-bottom和margin-top相邻时也会折叠。 5. 折叠...

    css中margin属性详细分析.pdf

    在实际应用中,需要注意的是垂直外边距合并(也称为外边距重叠),这是一个特殊的CSS现象,当两个相邻的块级元素的顶部或底部margin相遇时,它们可能会合并成一个更大的间距,而不是简单相加。这在处理列表项、段落...

    css中margin属性详细分析.docx

    例如,负margin可以用来拉近元素间的距离,或者让元素部分重叠。 最后,不同浏览器对CSS的解析可能存在差异,导致margin在某些情况下出现bug。因此,开发者需要熟悉常见的浏览器兼容性问题,并使用前缀(如 `-...

    CSS margin 属性定义边外补白

    CSS中的`margin`属性是一个非常重要的布局工具,用于设置元素周围的空间,也就是边外补白。边外补白不显示任何颜色或样式,因为它本质上是透明的,但它的作用是控制元素之间的距离,使得网页布局更加灵活和美观。 ...

    margin(CSS语法)-.rar

    例如,负值的`margin`可以用来创建重叠元素,或者调整元素位置以实现特定的设计需求。 `margin-collapse`是另一个与`margin`相关的概念,它描述了相邻元素之间外边距如何合并。当两个垂直或水平相邻的元素具有相同...

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

    今天整理了一下用css防止边距重叠的几种方法 先假设一组dom结构 通常情况下,如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果,然而 这其实不是我们想要的结果,我们只想对子元素设置...

    CSS margin属性介绍与用法(附margin解剖图)

    在CSS(层叠样式表)中,`margin`属性是一个非常重要的布局工具,它用于设置元素周围的外边距,也就是元素与其他元素或容器边界的空白区域。`margin`属性允许开发者控制元素之间的空间,使页面布局更加灵活和美观。...

    css margin属性深入解析

    CSS中的`margin`属性是一个非常关键的样式规则,它用于定义元素周围的空间,即外边距。这个属性允许开发者控制元素之间的距离,从而实现布局的美观和可读性。在深入解析`margin`属性之前,首先需要理解CSS盒模型...

    关于css中margin的值和垂直外边距重叠问题

    并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的! <!DOCTYPE html> <html> <head> &...

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

    在CSS布局中,外边距(margin)的重叠是一个常见的现象,特别是在处理多个垂直相邻的块级元素时。按照W3C规范,当两个或多个块级元素的垂直外边距相遇,它们的边界会合并,结果的外边距宽度将是这些外边距中的最大值...

    css盒子模型 css margin 外边框合并

    CSS 盒子模型是网页设计中理解元素布局的基础,它定义了元素的四个部分:内容区域(content)、内边距(padding)、边框(border)和外边距(margin)。内容区域是元素实际显示的数据部分,内边距是内容与边框之间的...

    margin负值之美

    在网页设计和开发中,`margin` 是一个非常重要的CSS属性,用于设置元素与周围元素的距离,即内外边距。而“margin负值之美”这个主题则深入探讨了如何巧妙利用负值`margin`来实现一些特殊的布局效果和设计创新。在...

Global site tag (gtag.js) - Google Analytics