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 ...
随机推荐
- [转]linux内存管理源码分析 - 页框分配器
转自: http://www.cnblogs.com/tolimit/ 阅读之前,先敬原作者一杯! 分段和分页 先看一幅图 也就是我们实际中编码时遇到的内存地址并不是对应于实际内存上的地址,我们编码中 ...
- 使用Flask+uWsgi的方式部署一个blog网站
本文参考以下文章:https://www.yukunweb.com/2017/12/ubuntu-nginx-uwsgi-flask-app/ 需要学习的地方 nginx+uwsgi部署flask应用 ...
- IO相关操作
IO相关操作 对于IO操作而言,有四个基本的操作:open .read .write .close 我们来逐个解释. 在此之前我们先解释一下什么是文件描述符 文件描述符 操作系统通过一个整数开代 ...
- Python - 模块(一)
目录 Python - 模块(一) 模块的引用方式 常用模块 random(随机模块) os模块 sys 序列化模块 hashlib subprocess optparse struct Python ...
- SSL/TLS 协议介绍
SSL/TLS 协议(RFC2246 RFC4346)处于 TCP/IP 协议与各种应用层协议之间,为数据通讯提供安全支持. 从协议内部的功能层面上来看,SSL/TLS 协议可分为两层: 1. SSL ...
- cogs 2478. [HZOI 2016]简单的最近公共祖先
2478. [HZOI 2016]简单的最近公共祖先 ★☆ 输入文件:easy_LCA.in 输出文件:easy_LCA.out 简单对比时间限制:2 s 内存限制:128 MB [题 ...
- 认识GIT之入门
前言 GIT是非常优秀的源代码版本管理工具,经过几年的发展,已经变得非常成熟以及流行,不同于其他的源代码管理系统,值得使用.GIT官网下载在线安装包,经常会中途退出,很有可能的原因是被墙了,所以建议使 ...
- js原生offsetParent解析
offsetParent是个仅仅读属性,返回近期显示指定位置的容器元素的引用. 假设元素没有指定位置,近期的元素或者根元素(标准模式下是html,怪异模式下是body)就是offsetParent. ...
- NTC 家电中的应用1
NTC应用非常广,特别是家电产品中,基本上凡是涉及到温度控制的都会选择它.本人应用的的产品有打奶器.电烤箱,油炸锅,咖啡机,直发器,暖风机和电壁炉,尽管应用广.但都是千篇一律.当中最基本的要点是应用中 ...
- leetcode第一刷_Same Tree
回来更博客的时候才发现.这道题不是跟推断树是不是对称的很相像吗.这个也是用了两个指针同一时候递归啊,有时候思维的局限真可笑. class Solution { public: bool isSameT ...