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

　　当父级元素的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. .NET进阶——ORM基础认识

    ORM对象关系映射,对象即实体,关系即关系数据库表.ORM即实现从实体对象关系数据库数据的映射. 本质上就是将数据从一种形式转换到还有一种形式.它详细又有哪些表现呢.咱们一步步学习,一步步分析. OR ...

  2. webpack02

    consumer-index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. STL使用————SET&MULTISET

    SET函数的基本用法 by hhl 使用set的好处 1. 当增加元素后,集合会自动删重并从小到大排列(时间比快排还快)2. 相当于一棵伸展树(能快速求出后继) 使用基础 #include<se ...

  4. Intellij Idea创建的第一个JavaWeb程序

    第一个JavaWeb程序 1. 创建 2. 目录结构 src目录用于放java源文件,web目录用于放web资源,WEB-INF是Java web应用固定的存放配置及类库的目录,index.jsp是我 ...

  5. poj--1237--Drainage Ditches（最大流）

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000KB   64bit IO Format: %I64d & %I64u Sub ...

  6. SpringMVC+MyBatis （druid、logback）

    数据库连接池是阿里巴巴的druid.日志框架式logback 1.整合SpringMVCspringMybatis-servlet.xml: <?xml version="1.0&qu ...

  7. axure母版使用实例之百度门户

    1.首先构建页面基本结构 2.新建母板 3.将母板应用于各个页面 4.在母板中隐藏聚焦背景及下拉二级菜单 5.在母板中添加事件:打开相应界面.显示/隐藏二级菜单 5.设置页面加载效果:给点击的一级菜单 ...

  8. powerdesigner导出sql

    http://jingyan.baidu.com/article/7082dc1c48960ee40a89bd38.html 生成注释 http://wangjingyi.iteye.com/blog ...

  9. SQL函数_Charindex()

    1 charindex()函数的作用是用于发现目标字符串第一次出现在源字符串中出现的开始位置. 语法如下 : select charinde(目标字符串,列名或字符串[,起始位置]) from 表名

  10. 《五》uploadify插件上传文件

    下载地址:http://www.uploadify.com/wp-content/uploads/files/uploadify.zip 相关配置:http://www.uploadify.com/d ...