垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距。

  当父级元素的min-height遇上边缘子级元素的垂直外边距后,垂直外边距合并问题就变得更加隐蔽了。

  当父级元素设定了高度,子级元素的外边距就不会影响到父级元素了;当父级元素没有设定高度,子级元素的外边距就会影响到父级元素,不过这时候边缘子元素贴着父元素的边缘,所以问题很容易被发现;而当父元素设定了min-height,并且边缘子元素距离父级底部有一段距离的时候,这个问题就很容易被忽略了。

  父级元素设定了min-height,边缘子元素的垂直外边距依旧会影响到父元素的,不管父元素的底部距离边缘子元素多远。这一点要注意,是跟设定死高度不同的。

  至于怎么解决,简单来说就是和不设定高度的时候一样。

相关文章:

1. 什么是BFC

2. CSS外边距合并(塌陷/margin越界)

3. 垂直外边距合并问题

CSS min-height不能解决垂直外边距合并问题的更多相关文章

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

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

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

    <CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...

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

    今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...

  4. __x__(43)0910第六天__ clearfix 解决:垂直外边距重叠,高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  5. Margin的垂直外边距问题

    做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...

  6. 【css基础】垂直外边距的合并

    近期在重温<CSS权威指南>,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结. 1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距 请看以下一个小 ...

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

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

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

    参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...

  9. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

随机推荐

  1. 关于post请求“CAUTION: Provisional headers are shown”【转】

    在POST请求中偶尔会出现"CAUTION: Provisional headers are shown" 这个警告的意思是说:请求的资源可能会被(扩展/或其它什么机制)屏蔽掉. ...

  2. rman数据库恢复;关键/非重要文件、影像副本、控制文件、还原点、非归档、增量、新数据库、灾难性回复

    运行全然恢复:在 ARCHIVELOG 模式下 丢失了系统重要数据文件: 假设某个数据文件丢失或损坏.且该文件属于 SYSTEM 或 UNDO 表空间,请运行下面步骤: 1. 实例可能会也可能不会自己 ...

  3. 浏览器Console创建canvas base64 png图片

    火狐中运行:console.log var canvas = document.createElement('canvas'); canvas.width =1 canvas.height =1 ca ...

  4. Oracle 审计初步使用

    新增一个表空间用于存储审计日志 SQL> CREATE tablespace audit_data datafile '/data/oradata/orcl/audit01.dbf' SIZE ...

  5. CSUOJ 1525 Algebraic Teamwork

    Problem A Algebraic Teamwork The great pioneers of group theory and linear algebra want to cooperate ...

  6. WPF通用框架ZFS《项目结构介绍01》_模块介绍

    首页介绍: 下图为项目运行首页图片, 大的结构分为三块: 1.Header首部模块(存放通知组件[全局通知.消息管理 ].扩展模块[皮肤.系统设置.关于作者.退出系统]) 2.Left左侧菜单模块(存 ...

  7. 模板实参推导 & xx_cast的实现

    首先,类模板必须被显式特化.当然了,可以通过一个辅助函数,通过参数类型,返回特化的类模板,来间接处理. 这个技术被广泛应用在ptr_fun, make_pair, mem_fun, back_inse ...

  8. codeforces 543 C Remembering Strings

    题意:若一个字符串集合里的每一个字符串都至少有一个字符满足在i位上,仅仅有它有,那么这个就是合法的,给出全部串的每一个字符修改的花费,求变成合法的最小代价. 做法:dp[i][j].前i个串的状态为j ...

  9. The incident LOST_EVENTS occured on the master. Message: error writing to the binary log, Error_code

    1 mysq error日志报错例如以下: 2014-05-12 11:29:54 22977 [ERROR] Slave SQL: The incident LOST_EVENTS occured ...

  10. 7.cocos精灵创建和绘制

    创建Layer层的类 T2LayerSprite.h #pragma once #include "cocos2d.h" USING_NS_CC; class T2LayerSpr ...