须知的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 ...
随机推荐
- 5、Tensorflow基础(三)神经元函数及优化方法
1.激活函数 激活函数(activation function)运行时激活神经网络中某一部分神经元,将激活信息向后传入下一层的神经网络.神经网络之所以能解决非线性问题(如语音.图像识别),本质上就是激 ...
- CODEVS-新斯诺克
原题地址:新斯诺克 题目描述 Description 斯诺克又称英式台球,是一种流行的台球运动.在球桌上,台面四角以及两长边中心位置各有一个球洞,使用的球分别为1 个白球,15 个红球和6 个彩球(黄 ...
- 2018徐州网络赛 - Trace
题意:n个左下角为原点右上角在第一象限的矩形不断覆盖,求最后形成的图形的周长 x和y是独立的,分别维护两棵线段树,一棵表示x坐标下最大的y值,另一棵表示y坐标下最大的x值 从覆盖的角度来考虑,如果逆序 ...
- Calibre 3.4版中,为epub书籍嵌入中文字体
1. 先把原版书籍epub文件添加到Calibre书库: 2. 书名上右键,选则 转换书籍 -> 逐个转换: 3. 在 界面外观 -> 字体 中,选择嵌入字体,在列表中选择中文字体,并勾选 ...
- (转)生活中的OO智慧——大话面向对象五大原则
一·单一职责原则(Single-Responsibility Principle) 定义:一个对象应该只包含单一的职责,并且该职责被完整地封装在一个类中. 宿舍里并不能好好学习,自习还是得去图书馆.这 ...
- Django中-事务操作
如何在Django中进行事务操作呢? 近期,公司里要使用Django开发一套金融相关的系统. 涉及钱了.....安全安全安全 如果钱转到一半,系统崩了,咋办? 如果钱汇到一半,系统崩了,咋办? 如果东 ...
- JavaScript数据结构-10.字典
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- transform旋转变换效果
div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
- python pip 安装OpenCV
cmd pip install opencv-contrib-python -i https://pypi.mirrors.ustc.edu.cn/simple/
- java的finally简单理解
1. 大家都知道, 普通的try, catch, finally格式: try{ //有可能会抛出异常的代码 }catch{ //抛出异常时处理的代码 }finally{ //无条件执行的代码,就不管 ...