实训h5-页边距穿透和合并问题

最新推荐文章于 2023-12-12 22:08:44 发布

_C9

最新推荐文章于 2023-12-12 22:08:44 发布

阅读量258

点赞数 1

分类专栏： # javaweb

本文链接：https://blog.csdn.net/weixin_45720782/article/details/118277143

版权

javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				/*margin常用在处理默认的外边距问题*/
				margin:0;
				padding:0;
			}
			.box{
				height:100px;
				width:100px;
				background-color: pink;
				margin: 20px;  
			}
			/*尽量使用内边距而不是外边距
			  外边距合并：在纵方向上完全相邻的多个外边距会合并成一个，取最大值
			  外边距穿透：如果一个容器没有边框，其内第一个元素和最后一个元素的外边距就会穿透出来
			      解决外边距穿透问题的方法：1、overflow:hidden; 2、给容器加一个像素的透明边框
			*/
		   .box1{
			   background-color: azure;
			   overflow:hidden;
		   }
		   .box2{
			   height: 0px;
			   margin:20px;
			   
		   }
		</style>
	</head>
	<body>
		<!--外边距合并问题-->
		<div class='box'></div>
		<div class='box'></div>
	
		<div class='box1'>
			<div class='box2'></div>
		</div>
	</body>
</html>