问题:margin的兼容margin-top的传递
描述:大盒子里面嵌套小盒子,给小盒子添加margin-top值,不但没有实现和大盒子之间的间距,反而传递到大盒子上,导致整体下移
解决兼容性问题:
- overflow:hidden解决margin-top的传递问题(此处不是溢出隐藏)
- padding-top:1px 这种方法会影响最后实际的高度，需要再高度height的基础上减掉,才不会影响最后实际的高度
- border-top:1px 这种方法会影响最后实际的高度,需要再高度height的基础上减掉,才不会影响最后实际的高度
- 给子元素的margin-top值改为给父元素加padding-top这样就避免了使用margin-top值导致的传递问题(转移了我们的目标对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* .wrap{
width: 300px;
height: 300px;
background-color:#f90;
} */
.inner{
margin-top: 20px;
width: 200px;
height: 200px;
background-color: aqua;
}
/* ===========================无情分割线======================= */
/*解决方法1*/
/* .wrap{
width: 300px;
height: 300px;
background-color:#f90;
overflow: hidden;
} */
/*解决方法2*/
/* .wrap{
width: 300px;
height: 299px;
background-color:#f90;
padding-top: 1px;
} */
/* 解决方法3 */
.wrap{
width: 300px;
height: 299px;
background-color:#f90;
border: 0;
border-top-width: 1px;
border-style: solid;
border-color: transparent;
}
/* 解决方法4 */
/* .wrap{
width: 300px;
height: 300px;
background-color:#f90;
padding-top: 20px;
}
.inner{
/* margin-top: 20px; */
width: 200px;
height: 200px;
background-color: aqua;
} */
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
</html>
转载请注明：大灰牛博客 » margin兼容之margin-top的传递问题(面试题)