margin垂直外边距的重叠问题
在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
初始未设置margin-top 垂直外边距:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
/*
* 为子元素设置一个上外边距，是子元素的位置下移
*/
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
预览效果图
image.png
因为子元素和父元素重叠,这个时候我给子元素设置margin-top 就会导致父元素也会跟着移动,导致bug出现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
/*
* 为子元素设置一个上外边距，是子元素的位置下移
*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
效果预览:
image.png
解决方案就是不要让子元素与父元素重叠
通过设置padding-top 让子元素与父元素不在重叠解决该bug
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box3{
width: 200px;
height: 199px;
background-color: yellow;
/*通过设置padding-top 让子元素与父元素不在重叠解决该bug*/
padding-top:1px;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
/*
* 为子元素设置一个上外边距，是子元素的位置下移
*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
预览效果:
image.png
