<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>外边距所带来的问题</title>
<style type="text/css">
div{
width:400px;
height: 200px;
}
.box1{
background-color: pink;
margin-bottom: 80px;
}
.box2{
background-color: skyblue;
/*margin-top: 120px;*/
}
.bigbox{
width: 600px;
height: 500px;
background-color: red;
margin-top: 100px;
/*border: 1px solid black;*/
/*paddiing-top:100px;*/
overflow: hidden;/*超出部分：隐藏*/
}
.sbox{
background-color: #FFC0CB;
margin-top: 100px;
;
}
</style>
</head>
<body>
<!--
外边距带来的第一个问题：相邻块级元素垂直外边距合并(只会取其中最大的外边距的值)
解决方法：只给一个盒子设置外边距。
外边距带来的第二个问题：嵌套块级元素垂直外边距塌陷问题
解决方法1：给父盒子添加边框
解决方法2：给父盒子添加内边距
解决方法3：给父盒子添加overflow:hidden;>开发中常用的。
-->
<div class="box1">第一个盒子</div>
<div class="box2">第二个盒子</div>
<div class="bigbox"></div>
<div class="sbox"></div>
</body>
</html>
外边距所带来的问题HBuider
扫一扫
1795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
