边距的合并与溢出
边距的合并与溢出
盒子与盒子之间会出现两种情况,一个是边距的合并,一个是边距的溢出,那么什么是边距的合并与溢出呢,下面会详细介绍:
- 边距的合并:当上下相邻的两个元素,相邻的面同时拥有外边距时,其外边距值只会取其中较大的值
- 边距的溢出:当父子关系的两个元素,子级拥有上下边距时,其外边距不会作用于父级,而是会传递给父级
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边距的合并与溢出</title>
<meta name="descrption" content="">
<meta name="keywords" content="">
<style type="text/css">
.wrap{
width:300px;
height:300px;
background-color:red;
/* border-top:1px red solid; */
/* padding-top:1px; */
overflow:hidden;
}
.box{
width:100px;
height:100px;
background-color:green;
margin-top:200px; /* 外边距为200px */
}
.top{
width:100px;
height:100px;
background-color:red;
margin-bottom:200px;
}
.bottom{
width:100px;
height:100px;
background-color:green;
margin-top:200px;
}
</style>
</head>
<!--
1.外边距的溢出(父子级)
子元素的上下边距会传递给父级而不是作用于父级
解决这个问题:
1.给父级加边框
2.给父元素加一个内边距
3.给父级加overflow:hidden;(内容超出处理)
2.外边距的合并:(兄弟级)
上下相邻的两个元素上下相对的外边距会进行合并(以值大的为准)
-->
<div class="wrap">
<div class="box"></div>
</div><br />
<div class="top"></div>
<div class="bottom"></div>
<body>
</body>
</html>
效果图如下:
此篇边距的合并溢出,主要是记住的是合并是作用于兄弟之间,而边距的溢出则是对于父子级而言。