分享程序员开发的那些事...
更新时间：2022-09-07 23:17:50
开发者学堂课程【CSS 快速掌握：margin 塌陷现象】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9194
内容介绍
一、margin 简介
14.1 margin 有塌陷现象
什么是 margin 的塌陷现象
1、在标准的文档流中竖直方向的 margin 值不会叠加它会取较大的值.
图中的代码如下：
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>竖直方向的 margin 值不会叠加它会取较大的值</title><style type="text/css">
div{
width: 100px;height:100px;
}
.div1{
background-color: #f00;/*下外边距*/
margin-bottom:20px;
}
.div2{
background-color: #00f;/*上外边距*/
margin-top:40px;
2、横着方向是没有 margin 的塌陷现象.
图中的代码如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>横着方向是没有 margin 的塌陷现象</title><style type="text/css">
.s1{
background-color: #f00;/*右外边距*/
margin-right: 20px;
}
.s2{
background-coLor: #00f;/*左外边距*/
margin-left: 40px;
}
</style></head>
3、浮动元素它是没有 margin 的塌陷现象的·
图中的代码如下：
.box{
width: 100px;
border : 5px solid #000;/*清除浮动*/
overfLow: hidden;
}
.box div{
width : 100px;height: 100px;
}
.div1{
background-coLor: #f00;float: left;/*向左浮动*margin-bottom: 20px;
}
.div2{
background-color: #0Of;float: left;/*向左浮动*margin-top: 40px;
}