css的外边距合并或者外边距塌陷问题
第一种情况：
已知两个宽和高均为100px，margin均为20px的div垂直排列，现象如下图所示：
当设置css1的margin-bottom：40px；或者css2的margin-top：40px时，现象如下图所示：
结论：
只有当两个垂直排列的盒子的垂直外边距挨在一起时会产生合并问题，此问题也不需要解决，记住谁的外边距较大就采用谁的外边距就ok了。
水平排列的盒子不存在合并的问题。
下面实验证实：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
/*抽取两个盒子共同特点的代码*/
width:100px;
height: 100px;
margin: 20px;
float: left; /*左浮动实现盒子水平排列*/
}
/*分别设置两个盒子不同的颜色*/
.div1{
background: pink;
}
.div2{
background:#CCC;
}
</style>
</head>
<body> <div class="div1">css1</div>
<div class="div2">css2</div> </body>
</html>
现象为：
第二种情况：
一个宽高均为200px的div1内嵌一个宽高均为100px的div2，当给div2设置margin：30px时，现象为：
此时外面的这个大的div的margin也变成了30px，下面这段解决此问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .div1{
width: 200px;
height: 200px;
background: pink;
overflow: hidden; /*解决该问题的代码*/
/*border:1px solid black 第二种解决办法：给大div设置一个边框*/
}
.div2{
width:100px;
height:100px;
margin: 30px;
background:#CCC; }
</style>
</head>
<body> <div class="div1">
<div class="div2">css</div>
</div> </body>
</html>
需要在大的div中写入overflow: hidden;这句代码可以理解为让浏览器显示该div的时候检查一下是否有问题，如果有问题，浏览器来解决。第二种解决办法见上面的代码。
最后的现象为：
css的外边距合并或者外边距塌陷问题的更多相关文章
- CSS外边距合并&块格式上下文
前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...
- margin显示怪异，外边距合并问题
很多时候我们使用两个div,内层的div设置文字,需要垂直居中与上层div,但是怎么设置样式都不行,vertical-align:middle也不行. 代码: <div style=" ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- css外边距合并和z-index的问题
参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...
- CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- 关于CSS的外边距合并问题
首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...
- CSS 外边距合并。
<div id = "parent"> <div id = "child"> demo </div> </div> ...
- CSS 垂直外边距合并：规范、延伸、原理、解决办法
<CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...
- CSS外边距合并的几种情况
CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...
随机推荐
- 基于requests模块的cookie,session和线程池爬取
目录 基于requests模块的cookie,session和线程池爬取 基于requests模块的cookie操作 基于requests模块的代理操作 基于multiprocessing.dummy ...
- Scrapy——5 下载中间件常用函数、scrapy怎么对接selenium、常用的Setting内置设置有哪些
Scrapy——5 下载中间件常用的函数 Scrapy怎样对接selenium 常用的setting内置设置 对接selenium实战 (Downloader Middleware)下载中间件常用函数 ...
- ES6的let和var声明变量的区别
关于let的描述 let允许你声明一个作用域被限制在块级中的变量.语句或者表达式.与var关键字不同的是,它声明的变量只能是全局或者整个函数块的. 作用域规则 let声明的变量只在其声明的块或子块中可 ...
- Python 3 条件语句
条件语句: 用于判定,判定是否符合某条件,符合则执行,不符合则不执行该条件所定义的操作. 一步判定: 用于理解不会这样使用. if 1==1: if条件判定只能出现一次. print(&q ...
- angular的又一本好书
MANNING出的<ANGULAR.JS IN ACTION>. 比上本看完的书<ANGULAR ESSENTIAL>多了一些有全局性的东东. 八个关键概念:MODULE,CO ...
- N天学习一个linux命令之ss
用途 输出socket统计,无任何参数时默认显示的是已建立socket连接的列表 用法 ss [options] [ FILTER ] 常用选项 -h, --help 显示帮助信息 -V, --ver ...
- Ubuntu 17.10安装phpMyAdmin数据库管理工具
和Windows下各种双击安装直接使用的数据库管理工具不同,Linux下的数据库管理工具显得有些稍稍复杂.由于版权和收费限制,很多好用的数据库管理工具例如Data Grip和Navicat不能直接 ...
- LA 3695 部分枚举
运用部分枚举的思想,很明显完全枚举点的思想是不可能的.改为枚举上下边界,当确定右边界j后,对左边界i,可以有点数为on[j]+on[i]+(leftu[j]-leftu[i])+leftd[j]-le ...
- C语言实现的lisp解析器介绍
近期.由于Perl而学习函数式编程, 再进一步学习lisp, 真是一学习就发现自己的渺小. 无意中找到了一个很easy的C语言版的, lisp解析器. 代码非常短, 却非常见功底, 涨姿势了. 附带还 ...
- IO 字节流学习
复制图片和MP3 import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.Fil ...