CSS min-height不能解决垂直外边距合并问题
垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距。
当父级元素的min-height遇上边缘子级元素的垂直外边距后,垂直外边距合并问题就变得更加隐蔽了。
当父级元素设定了高度,子级元素的外边距就不会影响到父级元素了;当父级元素没有设定高度,子级元素的外边距就会影响到父级元素,不过这时候边缘子元素贴着父元素的边缘,所以问题很容易被发现;而当父元素设定了min-height,并且边缘子元素距离父级底部有一段距离的时候,这个问题就很容易被忽略了。
父级元素设定了min-height,边缘子元素的垂直外边距依旧会影响到父元素的,不管父元素的底部距离边缘子元素多远。这一点要注意,是跟设定死高度不同的。
至于怎么解决,简单来说就是和不设定高度的时候一样。
相关文章:
1. 什么是BFC
3. 垂直外边距合并问题
CSS min-height不能解决垂直外边距合并问题的更多相关文章
- css盒子模型、垂直外边距合并
css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...
- CSS 垂直外边距合并:规范、延伸、原理、解决办法
<CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...
- 文本溢出、垂直外边距合并、BFC、hasLayout
今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...
- __x__(43)0910第六天__ clearfix 解决:垂直外边距重叠,高度塌陷
<div class="box1"> <tabl></table> <div class="box2">< ...
- Margin的垂直外边距问题
做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...
- 【css基础】垂直外边距的合并
近期在重温<CSS权威指南>,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结. 1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距 请看以下一个小 ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- css外边距合并和z-index的问题
参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...
- CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
随机推荐
- CodeForces 550E Brackets in Implications(构造)
[题目链接]:click here~~ [题目大意]给定一个逻辑运算符号a->b:当前仅当a为1b为0值为0,其余为1,构造括号.改变运算优先级使得最后结果为0 [解题思路]: todo~~ / ...
- Java定时器TimeTask
package com.alan.timer; import java.util.Calendar;import java.util.Date;import java.util.Timer;impor ...
- django 笔记2
默默坚持 :路由系统 URL :视图 request.GET request.POST request.FILES #checkbox等多选的内容 request.POST.getlist() #上传 ...
- Retrofit请求数据对错误以及网络异常的处理
http://blog.csdn.net/jdsjlzx/article/details/51566683
- Linux下搭建iSCSI共享存储详细步骤(服务器模拟IPSAN存储)
一.简介 iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够 ...
- linux sed命令详解 --大量举例
1. Sed简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后 ...
- Mysql学习总结(4)——MySql基础知识、存储引擎与常用数据类型
1.基础知识 1.1.数据库概述 简单地说:数据库(Database或DB)是存储.管理数据的容器: 严格地说:数据库是"按照某种数据结构对数据进行组织.存储和管理的容器". 总结 ...
- Vijos——T1406 拉力赛
https://vijos.org/p/1460 描述 车展结束后,游乐园决定举办一次盛大的山道拉力赛,平平和韵韵自然也要来参加大赛. 赛场上共有n个连通的计时点,n-1条赛道(构成了一棵树).每个计 ...
- cogs 1500. 误差曲线
1500. 误差曲线 ★★ 输入文件:errorcurves.in 输出文件:errorcurves.out 评测插件时间限制:1 s 内存限制:256 MB [题目描述] Josep ...
- 几种类型的db,以及最新的db排名,看一下
5月数据库排名: http://geek.csdn.net/news/detail/196118 另外这篇文章里面提到了一些内嵌式数据库: http://blog.csdn.net/leagoal/a ...