<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>外边距</title>
<style>
/* 初始化所有标签的内边距和外边距,写在样式中最开始的位置 */
*{ /* 通配符:指所有的标签 */
margin:0;
padding:0;
}
.box1{
width:400px;
height:400px;
background-color: pink;
margin-bottom: 80px;
/* 设置块级盒子水平居中:给盒子的左右外边距设置为auto(自动的) */
/* margin:10px auto 0; */
}
.box2{
margin-top: 120px;
width:300px;
height:300px;
background-color: skyblue;
}
/* 外边距问题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; /* 超出部分隐藏,能解决外边距塌陷问题 */
}
.smallbox{
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="smallbox"></div>
</div>
</body>
</html>
#外边距1
最新推荐文章于 2024-08-30 17:03:57 发布