css的外边距合并或者外边距塌陷问题

第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40px时,现象如下图所示: 结论: 只有当两个垂直排列的盒子的垂直外边距挨在一起时会产生合并问题,此问题也不需要解决,记住谁的外边距较大就采用谁的外边距就ok了. 水平排列的盒子不存在合并的问题. 下面实验证实: <!DOCTYPE html> <html lang="en"…

CSS外边距合并&块格式上下文

前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考前言之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库("'▽'")),这一次需要动手排一个页面,也挺简单,但是遇到了一个奇怪的问题,所以学习记录一下. 问题测试代码如下: <!doctype html> <html class="no-js" lang=""…

margin显示怪异，外边距合并问题

很多时候我们使用两个div,内层的div设置文字,需要垂直居中与上层div,但是怎么设置样式都不行,vertical-align:middle也不行. 代码: <div style="background-color: #eee;height:40px;font-size:18px;font-weight: bold;"> <div style="margin-top: 7px"> <span style="margin-le…

关于CSS inline-block、BFC以及外边距合并的几个小问题

CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例定义:当两个垂直外边距相遇时,将形成一个外边距. 合并的场景: 一个元素出现在另一个元素上面时: 示例: 一个元素包含另一个元素时(没有内边距或边框把它们的外边距分开) 如图效果中,父容器box和子元素box1的上外边距合并,与子元素…

css外边距合并和z-index的问题

参考这篇文章, 将外边距的折叠参考这篇文章, 将bfc的生成, bfc的应用参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, 但没有外边距margin属性? 这个说法是错误的! 实际操作表明, 所有的style样式属性都是具有的! 该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴.如果为正数,则离用户更近,为负数则表示离用户更远. z-index 与 position属性的关系? 关于stacki…

CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择…

关于CSS的外边距合并问题

首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type=&qu…

CSS 外边距合并。

<div id = "parent"> <div id = "child"> demo </div> </div> #parent { background: red; width: 200px; height: 200px; } #child { background: green; width: 50px; height: 50px; margin-top: 50px; } 在IE8中#child div的marg…

CSS 垂直外边距合并：规范、延伸、原理、解决办法

<CSS 权威指南>第七章基本视觉格式化.p192,提到了垂直外边距合并的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详解,总结如下: 规范: 8.3.1 Collapsing margins 计算方法: 如果外边距都是正数,取大的: 如果一个正数,一个负数,正外边距-负外边距的绝对值,相当于正外边距+负外边距: 都为负数,取外边距绝对值较大的: 如果相邻外边距有多个,要一起参与计算,不能分布计算:要注意,相邻的元素不一定非要…

CSS外边距合并的几种情况

CSS外边距合并的几种情况外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical ma…

CSS min-height不能解决垂直外边距合并问题

垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-height遇上边缘子级元素的垂直外边距后,垂直外边距合并问题就变得更加隐蔽了. 当父级元素设定了高度,子级元素的外边距就不会影响到父级元素了:当父级元素没有设定高度,子级元素的外边距就会影响到父级元素,不过这时候边缘子元素贴着父元素的边缘,所以问题很容易被发现:而当父元素设定了min-height,并且…

CSS外边距合并（塌陷/margin越界）

原文简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5.出现的情况 1.什么是外边距合并?(折叠外边距) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.而左右外边距不合并. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种…

css盒子模型、垂直外边距合并

css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容区域的宽度后,再设置盒子的填充.边框.边距值,盒子在页面中实际占据的页面尺寸的计算是: 水平方向上::width+2*padding+2*border+2*margin, 垂直方向上::height+2*padding+2*border+2*margin, 不过需要注意的是行内元素,在不改变它的表现…

css中外边距合并

最近在布局时遇到一个有趣的问题 <style> #div1{width:200px;height:200px;background:red;} #div2{width:50px;height:50px;background:blue;margin:20px;}<style> <div id="div1"> <div id="div2"> </div> </div> 实验了一下,结果是这样的:…

CSS 外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: 当一个元素包含在另一个元素中…

CSS Margin外边距合并

应该知道这点东西的!!! 可是偏偏记不住! 外边距合并会发生在以下两种情况下: 1 垂直出现的两个拥有外边距的块级元素. div1 { margin-bottom: 20px; } div2 { margin-top: 10px; } 恰巧他俩div1在上面,div2在下面.这个时候表现出来就是div1的下外边距为20px,但是div2的上外边距2为20px.而div2外边距紧挨着的是div1的border-bottom. 2 一个父元素包含一个子元素,且都有外边距. div1 { margin…

CSS外边距合并问题

今天无意中碰到了外边距合并的问题,于是便研究了一下.这里做个笔记. 所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 例如,这里有这样两个块元素: <div class="box1"></div> <div class="box2"></div> 这里给的样式是: .box1{ width:150px; height:150px; bac…

CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

本文内容: 表格边框合并兄弟标签外边距合并父子标签的外边距合并首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellspacing="0"后,表格的相邻边框会合并,使得边框变粗了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document<…

关于collapsed margin（外边距合并）

这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里重新展示出来,代码如下: <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery.js&qu…

由外边距合并到BFC

置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时会话) ::selection{ background:blue; color:red; } span{ color:red; } 外边距合并 myvin今天主要说的是BFC,块级格式化上下文,这里先由外边距合并引出来. 对于外边距合并,应该都不陌生,在这里简单列出外边距合并的几种情况: 两个元素…

CSS2系列：外边距合并问题(margincollapse)

外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 为了好认识,我们称内部div为"盒子",包含这个内部div的外部div为"包含体" 解释怎么相遇: 相邻的两个盒子(可能是兄弟关系也可能是包含关系)这两个元素margin之间不能夹杂着边框啊,补白啊什么的就…

文本溢出、垂直外边距合并、BFC、hasLayout

今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本.然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ,包括设置盒子的伸缩方向和显示的行数. 用div内嵌div做一个小测试:发现对子元素,margin-left有效但是margin-top是无效的,问题的…

内层div的margin-top影响外层div——引出外边距合并Collapsing margins

内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. <style type="text/css">body { margin:0; padding:0;}div { margin:0; padding:0;}.a { width:500px; margin:0px auto 30px; background:#eee;}.d1…

“margin塌陷” 嵌套盒子外边距合并现象

来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间若两者都为正外边距以最大的外边距为准: 若存在负边距, 合并后的外边距为最大正外边距减去绝对值最大的负边距: 若无正外边距,则用0减去绝对值最大负边距. 2.父元素与第一个/最后一个子元素之间如果块级元素的 margin-top/margin-bottom 与它的第一个/最后一个子元素的margin-t…

为什么margin-top不是作用于父元素【margin外边距合并问题】

coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中非常的常见,必须对此有明确的把握,以此做到未雨绸缪,否则可能影响工作效率,甚至严重阻碍项目的进度.在网络上已经有大量的相关文章,下面结合实例代码对margin外边距合并做一下总结.外边距合并概念:相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并.水平方向不存在此现象.外边…