CSS--外边距合并

最新推荐文章于 2024-07-15 12:06:21 发布

Go· again

最新推荐文章于 2024-07-15 12:06:21 发布

阅读量139

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_43766304/article/details/104718930

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

写给自己

本文讲的是一个不能称之为bug的一个小bug

垂直方向的外边距合并，左右不会合并

理解

<!DOCTYPE html>
<html lang="zh">
<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>CSS--外边距合并</title>
	<style type="text/css">
		.box01,.box02{
			width: 200px;
			height: 200px;
			background-color: #00FFFF;
		}
		.box01{
			margin-bottom: 50px;
		}
		/* 垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
		 合并后的外边距高度等于两个发生合并的外边距的高度中的较大者*/
		.box02{
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div class="box01">1</div>

	<div class="box02">2</div>
	<br>
	<p>可以看到上面两个方框的边距是50px，属于.box01设置的样式</p>
	<p>解决方式：<br>
	1.使用这种特性<br>
	2.设置一边的外边距，一般设置margin-top <br>
	3.将元素浮动或者定位
	</p>
</body>
</html>

示例代码

<!DOCTYPE html>
<html lang="zh">
<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>CSS--外边距合并理解联系示例代码</title>
	<style type="text/css">
		.box{
			width: 500px;
			border: 1px solid #00FFFF;
			margin: 50px auto 0; 
			
		}
		.box div{
			/* 同时设置margin-top和margin-bottom实现效果 */
			/* margin-left: 20px;
			margin-right: 20px;
			
			margin-bottom: 20px;
			margin-top: 20px; */
			
			/* 简化代码 */
			margin: 20px;
			
			
			
		}
	
	</style>
</head>
<body>
	<div class="box">
		<div>
			垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
			合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
		</div>
		<div>
			垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
			合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
		</div>
		<div>
			垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
			合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
		</div>
		<div>
			垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
			合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
		</div>
	</div>
	<br>
	<p>注释：就是为了实现这种效果。所以才会产生外边距合并这种功能</p>

	
</body>
</html>