须知的css——margin不重叠的情形
margin重叠
CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin。Margin按这种方式结合叫重叠(collapse)
,产生的结合的margin叫做重叠margin。
margin重叠的计算规则
当两个或者更多的margin合并时,产生的margin宽度为合并margin宽度中的最大值。至于负margin,就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。如果没有正margin,就用0减去相邻margin的绝对值的最大值
什么是相邻的margin
摘自css2.1规范中文版
两个margin是相邻的,当且仅当:
- 都属于流内块级盒,处于同一个块格式化上下文。
- 没有行盒(line box),没有空隙,没有padding并且没有border把它们隔开(注意,因此某些0高度行盒)
- 都属于竖直相邻盒边(vertically-adjacent box edges),即来自下列某一对:
1.一个盒的top margin和它的第一个流内子级的top margin
2.一个盒的bottom margin和它的下一个流内后面的兄弟(its next in-flow following sibling)的top margin
3.最后一个流内子级的bottom margin和它的父级的bottom margin,如果父级的高度的计算值为'auto'
4.一个盒的top和bottom margin,该盒没有建立一个新的块格式化上下文并且min-height的计算值为0,height的计算值为0或者'auto',并且没有流内子级
如果一个margin的任何部分margin与另一个margin相邻的话,就认为它与那个margin相邻,是合并(collapsed)margin。
具体分析各个条件
1.都属于流内块级盒,处于同一个块格式化上下文。
什么是流内元素?如果一个元素是浮动的,绝对定位的或者是根元素,那么它就是流外元素。如果一个元素不是流外的,就叫流内元素。
流内块级盒,就是流内块级元素生成的一个盒。
结论1:根元素的盒子margin不会发生重叠(原因:根元素虽然是块级盒,但不是流内元素)。
举个
须知的css——margin不重叠的情形的更多相关文章
- css margin重叠
父子元素margin(垂直方向)重叠 解决办法: 给子元素添加浮动属性,相应父元素添加必要的清浮动属性: 给父元素添加边缘属性,如padding.border: 同级元素margin(垂直方向)反向重 ...
- css margin
css中margin边界叠加问题: 看个同方向和异方向margin重叠现象: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- css margin的相关属性,问题及应用
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin ...
- CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...
- CSS Margin(外边距)
CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...
- 细说 CSS margin
作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...
- CSS:CSS margin(外边距)
ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- margin的重叠现象
当两个相邻的普通元素设置margin时,则它们的间距并不是简单的外边距相加. <!DOCTYPE html> <html lang="en"> <he ...
随机推荐
- 删除数据库的数据后让id从1开始算
delete from t_AttendanceRecorddbcc checkident('t_AttendanceRecord',reseed,0) truncate table 表名称
- python的面向对象和类
目录 一.基本知识点 1.面向过程编程 2.面向对象编程 3.注意 二.类的结构 1.类的理解 2.代码形式 3.类和函数的一些区别 4.类中的数据 5.类中的方法(基础) 三.类的实例化 四.类的继 ...
- (转)mysql、innodb和加锁分析
mysql.innodb和加锁分析 原文:https://liuzhengyang.github.io/2016/09/25/mysqlinnodb/ 介绍 本文主要介绍MySQL和InnoDB存储引 ...
- webpack原理探究 && 打包优化
在做vue项目和react项目时,都用到了webpack.webpack帮助我们很好地提高了工作效率,但是一直以来没有对其原理进行探究,略有遗憾. 因为使用一个工具,能够深入了解其原理才能更好地使用. ...
- 【Maven学习】远程仓库的配置
很多情况下,默认的中央仓库无法满足项目的需求,我们可能需要配置新的远程仓库,此时我们可以这样配置: <repository> <id>java-net</id> & ...
- python-select异步IO
#实现多任务在同一个线程切换 #!/usr/bin/python from socket import * from select import * from time import ctime so ...
- python中的生成器(一)
我们先考虑一个场景: 有个情景需要循环输出1——10. 这里给两种方法: list1 = [1,2,3,4,5,6,7,8,9,10] for i in list1: print(i) for i i ...
- maven多模块下新建子模块
选中parent模块,右键选择new---others 选择Maven---Maven Module,点击下一步 填写Module Name,其他默认,点击下一步 默认,下一步 默认,点击完成
- memcached 学习笔记 4
memcached真实项目中的应用 1 缓存式的Web应用程序架构 有了缓存的支持,我们可以在传统的app层和db层之间加入cache层,每个app服务器都可以绑定一个mc, 每次数据的读取都可以从m ...
- Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果
绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...