垂直margin重叠是为什么

2024-10-22

垂直方向margin重叠原因与解决方法

参考博客:https://blog.csdn.net/weixin_33743661/article/details/88755435

2016/2/25 1， margin auto 垂直方向测试无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向上margin:auto;无效. auto会自动适应各种宽度的屏幕.2.测试margin重叠的发生条件及现象,并自行搜索“父子div”也会发生margin重叠,写出代码及效果图. <!DOCTYPE html> <html> <head> <title>测试父子

垂直margin为什么会重叠

之前看到的post中有这样的一个问题:垂直margin为什么会重叠?我可以说出solve,但是说不出why. 在stackoverflow上找到了一个很好的解释:margin的定义不是让元素移动xxpx,而是这个元素的旁边必须有xxxpx的的空白. 得到了这个解释之后,想一下“为首个子元素添加20px的上边距,父元素竟跟着子元素下沉了”这个问题,再思考一下解决方法.给父元素添加overflow开启一个BFC,或者给父元素增加padding.border之类,这样的做法使元素的旁边边界不是上一个盒

上下margin重叠传递问题

我发现强迫症真的是我一个大病...每次都非得把所有情况都实验出来不可...BUT!!!!!!!!!悲催的是,这么多情况我根本记不住...还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部分总结到这里啦~ 下面的几个部分应该是margin重叠问题的所有情况了: 1.两个普通元素上下的margin会合并为一个margin,哪个大选哪个! 两个浮动元素不会出现margin传递的问题,依然是上面元素的margin-bottom和下面元素的margin-top相加作为两者之间的margin值

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

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成.但是边界的重叠也有例外情况: 1.水平边距永远不会重合.2.在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠.最终

css margin重叠

父子元素margin(垂直方向)重叠解决办法: 给子元素添加浮动属性,相应父元素添加必要的清浮动属性: 给父元素添加边缘属性,如padding.border: 同级元素margin(垂直方向)反向重叠同级元素margin反向重叠时,元素之间的距离为两个margin值中较大的那个. 因解决办法较少且兼容性较差,在具体编码中,应尽量避免这种情况的出现. 水平方向margin无重叠现象.一般只有块级元素会有margin重叠的问题.

margin重叠

margin重叠也就是我们常说的CSS 外边距合并,W3C给出如下定义: 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 查看详情 margin折叠的产生有几个条件: 这些margin都处于普通流中,并在同一个BFC中: 这些margin没有被非空内容.padding.border 或 clear 分隔开: 这些margin在垂直方向上是毗邻的,包括以下几种情况: 1.一个box的top margin与第一个子bo

解决margin重叠的问题

margin重叠有两种情况: 1.兄弟级的垂直块之间,margin这个属性上下边距,会发生重叠的情况解决办法:float浮动或display:inline-block 2 .父子级的块之间,子级的上下margin会与父级上下margin重叠解决办法:父级加overflow:hidden或加padding或加border,子级加position:absolute

margin重叠与穿透问题

margin重叠是指两个同级元素之间.margin穿透指的是,子元素margin超出父元素而未被父元素包含的现象. 出现margin重叠的原因: 同一个BFC里面两个块级元素会出现margin折叠. 解决方式:让两个块级元素不在一个BFC内. 默认情况,子元素设置margin-top或者margin-bottom会影响其父元素,这就是所谓的margin穿透.解决方式:1.给父元素加个border; 2.将父元素变成BFC. BFC: Block Formatting Context 简称块级格

margin 重叠问题深入探究

margin 重叠问题 Margin Collapse 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(重叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为边距重叠. MDN-外边距重叠重叠的结果: 1.两个相邻的外边距都是正数时,重叠结果是它们两者之间较大的值. 2.两个相邻的外边距都是负数时,重叠结果是两者绝对值的较大值. 3.两个外边距一正一负时,重叠结果是两者的相加的和. margin 重叠本质上的问题还是 B

清浮动，防止上下margin重叠（浏览器顶部空白崩溃）

清浮动父级添加类别! .clearfix{zoom:1;//兼容ie6,7} .clearfix:after{ content:"."; display: "block"; height: "0"; clear: both; visibility: hidden; } 防止上下margin重叠,也可以清除浮动塌陷(推荐) .clearfix:after, .clearfix:before{ content:" "; disp

CSS盒模型和margin重叠

在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸.(div的实际占用尺寸变打了) 但: 一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的.不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型

margin重叠现象

1.上下/左右相邻的普通元素margin,不是两者相加之和,而是取最大值,这个现象叫做margin重叠. 2. 普通元素才会发生margin重叠,如果是float元素,就不会发生.margin是两者相加之和. 例如:1普通元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习(margin重叠现象)</ti

css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 可参考css2.1 中文规范 1.可替换元素与不可替换元素根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签

margin重叠现象与margin auto自适应居中

上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值:而浮动的盒子边距是相加的:父子div也会发生重叠,并不是bug: <style>#test1{ width:1000px; height:100px; background:blue; margin-bottom:50px; } #test2{ width:1000px; height:100px; background:green; margin-top:20px; }</style></

深入理解BFC和外边距合并(Margin Collapse)

一.什么是BFC? 1.BFC的概念 BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作“块级格式化范围”.它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.通俗的讲,就是一个div内部,我们用float和margin布局元素. 2.BFC布局规则内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重

前端精选文摘：BFC 神奇背后的原理

BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚.于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS

什么是BFC？（转载）

在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染.让我们看看有哪些盒子: block-level box:display

BFC布局原理

写这篇博客的初衷其实是在解决浮动的时候看到的这个方法,就想着BFC是什么,为什么可以清除浮动.结果不看不知道,一看越看越不明白,潜下心来研究看看,总结一下学习心得. 1.BFC是什么 BFC就是Box Formatting Context的简称,直译为"块级格式化上下文". 1.1 Box是css布局的基本单位 Box是CSS布局的对象和基本单位,元素的类型和display特性,决定了Box的类型,不同类型的盒子决定了页面不同的布局形式 block-level box:display

BFC 小结

最近对一些基础知识进行了整理,下面是针对 BFC 的一些整理以及本人对 BFC 的一些理解. 1. 首先,什么是 BFC 呢? BFC,Block formatting context,直译为"块级格式化上下文". 在说 BFC 之前,我们首先要弄懂什么是 formatting context? fomating context:格式化上下文,是W3C CSS2.1规范中的一个概念,拥有一套渲染规则.对内来约束其内块级元素的布局,对外来控制和外部元素的布局.通俗一点的讲,它就是页面中的

垂直margin重叠是为什么

热门专题