在html中通过使用css解决外边距重叠（外边距塌陷）问题

最新推荐文章于 2025-06-12 15:53:03 发布

原创

最新推荐文章于 2025-06-12 15:53:03 发布 · 2.1k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #java

本文详细介绍了CSS中的外边距重叠（外边距塌陷）问题，通过实例演示了如何使用display属性、边框、内边距、overflow和position等方法来解决这一问题。内容包括概念解析、代码演示和解决方案的优缺点分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：老规矩先来一个框架

第二步：这里我们通过使用三个div盒子和一个span来演示（至于为什么请往下看）

第三步，接下来我们加上css样式，这样可以更加直观的观看

第一种.设置display: inline-block;（这里推荐给子元素设置，给父元素设置对布局影响相对子元素来说大一些）

第二种：给父元素添加边框

第三种：给父元素设置给父元素添加padding

编辑

第四种：给父元素加overflow：hidden

第五种：给父级或者子级设置position

首先：我们先来了解一下概念，什么叫外边距重叠？

1.外边距重叠也可以称之为外边距塌陷，我们在设置外边距时，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

接下来我们进行代码演示

第一步：老规矩先来一个框架

<!DOCTYPE html>
<html lang="en">

<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>/title>
    <style>
	
		
    </style>
</head>

<body>
   
</body>

</html>

第二步：这里我们通过使用三个div盒子和一个span来演示（至于为什么请往下看）

<!DOCTYPE html>
<html lang="en">

<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></title>
    <style>
		*{
			margin: 0;
			padding: 0;
		}
		
    </style>
</head>

<body>
    <div id="first">
		<div class="box"></div>
	</div>
	<div id="two">
			<span></span>
	</div>
</body>

</html>

第三步，接下来我们加上css样式，这样可以更加直观的观看

1初步样式

<!DOCTYPE html>
<html lang="en">

<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></title>
    <style>
		*{
			margin: 0;
			padding: 0;
		}
		
		body{
			width: 800px;
		}
		
		#first{
			width: 300px;
			height: 300px;
			background-color: antiquewhite;
		}
		
		.box{
			width: 150px;
			height: 150px;
			background-color: aqua;
		}
		
		#two{
			width: 300px;
			height: 300px;
			background-color: blueviolet;
			float: right;
		}
		
		span{
			width: 100px;
			height: 100px;
            background-color: brown;
		}
    </style>
</head>

<body>
    <div id="first">
		<div class="box"></div>
	</div>
	<div id="two">
			<span></span>
	</div>
</body>

</html>

这里大家可以看见我分别设置了三个div盒子和span的宽高，并添加上了背景颜色，但大家可以看见span没有显示（这里先告诉大家原因：是因为span是行内元素，行内元素无法设置宽高，所以这里我们需要在后面代码中添加一个display），下方是效果图

2.解决span问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=d

最低0.47元/天解锁文章

200万优质内容无限畅学