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

  当父级元素的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. IOS-7-纪念一下刚刚接到的第一份offer(下面是面试遇到的问题)

    1.多线程技术 有四种开启线程的方式,基本的为:NSThread.NSOperation.GCD:还有一种已经老掉牙了.基于C语言.就不写了,基本不用. 样例:家在网络图片显示在手机界面上 第一步:代 ...

  2. 封装html代码块到js函数中

    有时候想把公共的html封装起来,怎么处理呢? 好多页面都用到,不可能每个页面都写,这样就会有冗余,并且不好统一处理. 那就用js来重构html吧. 代码案例如下: <footer class= ...

  3. BZOJ 3544 treap (set)

    我只是想找个treap的练习题-- 每回找到lower_bound 就好啦 //By SiriusRen #include <cstdio> #include <cstring> ...

  4. HDU 5371 Hotaru's problem Manacher+尺取法

    题意:给你一个序列,求最长的两段回文子串,要求他们共用中间的一半. 思路:利用Manacher求出p[i]表示的当前位置的最长回文串长度,然后把每一个长度大于等于2的回文串的左区间和右区间分别放到两个 ...

  5. 图解RHEL6从安装光盘中进行yum安装

    图解RHEL6从安装光盘中进行yum安装 导读:我们这里讲的Yum,是Yellow dog Updater, Modified的缩写,可执行程序名为yum,它的理念是使用一个中心仓库(reposito ...

  6. Convolution & Pooling exercise

    convolution First, we want to compute σ(Wx(r,c) + b) for all valid (r,c) (valid meaning that the ent ...

  7. VirtualBox内刚刚安装完Debian9系统,也无法设置共享文件夹。解决的方法就是安装VirtualBox客户端增强包。

    VirtualBox内刚刚安装完Debian9系统,也无法设置共享文件夹.解决的方法就是安装VirtualBox客户端增强包. 1.若直接安装客户端增强包会得到如下提示:root@debian:/op ...

  8. Ubuntu16.04 “有线未托管”有线网络不可用问题解决

    Ubuntu16.04 “有线未托管”问题解决 电脑上安装的Ubuntu16.04 是通过先安装Ubuntu Server后在通过命令 sudo tasksel 安装的Gnome桌面环境,安装完成后发 ...

  9. MHP 宿舍摄像头在门卫显示方案

    通过VPN拨入公司内网,实现访问外网摄像头. 1.  宿舍和MHP公司各增加一条上网线路(可用移动) 2.宿舍处理:  2台带TF卡 摄像头,加入到萤石云端   130万摄像头+64G TF卡 3.宿 ...

  10. Flex 集合 ArrayCollection 的使用

    转:http://keren.iteye.com/blog/380847 转:http://callan.iteye.com/blog/335551 集合是ActionScript 中功能强大的基于索 ...