margin-bottom: 80px;
}
.box2{
width: 300px;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>外边距</title>
<style>
<style>
/* 初始化所有标签的内边距和外边距,写在样式中最开始的位置 */
*{ /* 通配符:指所有的标签 */
margin: 0;
padding: 0;
}
.box1{
width: 400px;
height: 400px;
background-color: pink;
/* 设置块级盒子水平居中: 给盒子的左右外边距设置为auto(自动的)*/
/* margin: 10px auto 0; */
height: 300px;
background-color: skyblue;
margin-top: 120px;
}
/*
外边距问题1:相邻块级元素垂直外边距合并.
解决:一般只给其中一个盒子设置外边距.
外边距问题2:嵌套块级盒子之间外边距的塌陷。
解决方法1:给父盒子添加边框;
解决方法2:给父盒子添加内边距,但是会导致父盒子被撑大。
解决方法3:给父盒子添加样式overflow: hidden; 使用最多的解决方式。
*/
.bigbox{
width: 600px;
height: 600px;
background-color: red;
margin-top: 100px;
/* border: 1px solid black; */
/* padding-top: 100px; */
overflow: hidden; /* 超出部分隐藏,能解决外边距塌陷问题 */
}
.sbox{
width: 300px;
height: 300px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="bigbox">
<div class="sbox"></div>
</div>
</body>
</html>
08-10
5577
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
11-26
1183
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)