垂直margin合并问题

前提：

　　同属于一个BFC的两个相邻的盒子的margin会发生重叠

描述：

　　外边距合并指的是，当两个垂直外边距相遇时（水平外边距相遇的时候不会有这种问题），它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解决办法：

　　1. 使用这种特性

　　2. 设置一边的外边距，一般设置margin-top

　　3. 将元素浮动或者定位等（也就是创建一个新的BFC区域，让它们不属于同一个BFC就可以了）

转载于:https://www.cnblogs.com/david-lcw/p/10134240.html

垂直margin合并问题相关推荐

margin塌陷与margin合并、浮动流
一.margin 塌陷父子嵌套元素,垂直方向的margin,父子会粘合在一起,取最大的值.子级不能根据父级定位,好像父级没有棚. 解决方案,触发bfc(block format context),使 ...
解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
margin塌陷和margin合并
一.margin塌陷父子嵌套元素垂直方向的 margin ,父子元素是结合在一起的,他们两个会取其中最大的值正常情况应该是父级相对于浏览器进行定位,子级应该相对于父级定位的 , 但是 margi ...
css【详解】—— margin属性（含margin合并，margin：auto，margin失效）
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2. 父级和第一个/最后一个子元素阻止margin-top合并的方法阻止margin-bottom合并的方法 3. 空块级元素的m ...
如何解决margin塌陷以及margin合并
什么是外边距合并,以及常见的几种情况外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 所谓的外边距合并就是,当两个垂直外边距相遇时,它们将形成一个外边距.合 ...
css 纵向合并_影响CSS的margin合并的几个属性
iOS中将颜色转化成图片定义一个类方法: 声明: + (UIImage *)imageFromColor:(UIColor *)color; 实现: + (UIImage *)imageFrom ...
BFC与IFC概念理解+布局规则+形成方法+用处
想要理解BFC与IFC,首先要理解另外两个概念:Box 和 FC(即 formatting context). Box 一个页面是由很多个 Box 组成的,元素的类型和 display 属性决定了这个 ...
国庆假的CSS +JS 学习笔记
1.左右两列定宽,中间自适应, 6. 一个div 中,放三个div ,其中左边和右边是150px,中间div 自适应宽度. left center right .content{ background ...
html中使浮动的字为行排列,CSS布局：float浮动
优秀文章:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 浮动细节原理所有元素设置float浮动之后,会脱离文档流 ...

垂直margin合并问题

垂直margin合并问题

前提：

描述：

解决办法：

垂直margin合并问题相关推荐

最新文章

热门文章