解决外边距margin在垂直方向上合并的问题
2018-06-21 本文已影响0人
exmexm
解决外边距margin在垂直方向上合并的问题
问题描叙：
有一个big盒子，里面嵌套一个small盒子，本来想让small盒子在外边距上下移，但是带动整个big盒子下移，并且small盒子相对与big盒子的位置没有发生任何改变。
代码如下：
<!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>
.big {
width: 200px;
height: 200px;
background-color: red;
}
.small {
width: 100px;
height: 100px;
background:green;
margin-top:100px;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
</div>
</div>
</body>
</html>
期望效果：
small盒子在big盒子的下半部分
实际问题：
small盒子的margin-top导致big盒子在垂直位置发生了偏移。
解决方法1.
给被嵌套元素，即big盒子添加border属性，但是要注意原来的盒子大小增加了border的宽度。
代码如下：
.big {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid red;
}
解决方法2.
给被嵌套的元素添加overflow：hidden属性值。
.big {
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
}
