盒子模型塌陷问题解决

最新推荐文章于 2025-05-23 14:10:47 发布

封雨辰

最新推荐文章于 2025-05-23 14:10:47 发布

阅读量199

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/zc3288146365/article/details/147111407

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 600px;
				height: 300px;
			}
			.box1{
				/* 背景颜色 */
				background-color: hotpink;
				margin-bottom: 100px;
			}
			.box2{
				/* 背景颜色 */
				background-color: darkblue;
				/* margin-top: 50px; *//* 解决合并问题 */
			}
			/* 相邻盒子垂直方向边距合并问题:只需要给其中一个盒设置外边距 */
			.bigbox{width: 500px;
			height: 600px;
			background-color: bisque;
			margin-top: 200px;
			/* border: 1px solid red; */
			overflow: hidden;/* 超出部分:隐藏;解决外边距塌陷问题 */
			}
			.bigbox .sbox{
			width: 300px;
			height: 300px;
			background-color: aqua;
			margin-top: 120px;
			}
			/* 嵌套块级盒子垂直方向边距塌陷:
			解决方法1:给父盒子设置边框;
			解决方法2:给父盒子添加padding(但不把盒子撑大),不推荐使用
			解决方法3:给盒子添加overflow:hidden; */
		</style>
	</head>
	<body>
		<!-- <div class="box1">1</div>
		<div class="box2">2</div> -->
		<div class="bigbox">
			<div class="sbox"></div>
			
		</div>
	</body>
</html>