030_CSS外边距合并

最新推荐文章于 2021-08-10 11:29:57 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-08-10 11:29:57 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109084939

css学习专栏收录该内容

52 篇文章

订阅专栏

本文详细解析了CSS外边距合并的机制，包括垂直外边距的合并规则、实例演示和段落间距一致性的重要性。通过代码和效果展示，帮助开发者避免布局困惑，提升页面设计效率。

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

1. 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。

2. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

3. 外边距合并

3.1. 外边距合并(叠加)是一个相当简单的概念。但是, 在实践中对网页进行布局时, 它会造成许多混淆。

3.2. 简单地说, 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

3.3. 当一个元素出现在另一个元素上面时, 第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:

3.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS上下元素外边距合并</title>
		<meta charset="utf-8" />

		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			div {
  				width: 100px;
  				height: 100px;
			}
			#d1 {
				background-color: red;
				margin-bottom: 20px;
			}
			#d2 {
				background-color: blue;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div> 
		<div id="d2"></div>
		<p>当一个元素出现在另一个元素上面时, 第一个元素的下外边距与第二个元素的上外边距会发生合并。 <br />
		请注意, 两个div之间的外边距是50px, 而不是70px(20px + 50px)。</p>
	</body>
</html>

3.3.2. 效果图

3.4. 当一个元素包含在另一个元素中时, 如果外层元素和内层元素之间没有别的元素或文本, 它们的上和下外边距也会发生合并。请看下图:

3.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS包含元素外边距合并</title>
		<meta charset="utf-8" />

		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			#d1 {
				width: 200px;
  				height: 200px;
				background-color: red;
				margin-top: 20px;
			}
			#d2 {
				width: 100px;
  				height: 100px;
				background-color: blue;
				margin-top: 50px;
			}
			#d3 {
				width: 200px;
  				height: 200px;
				background-color: red;
			}
			#d4 {
				width: 100px;
  				height: 100px;
				background-color: blue;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2"></div>
		</div>
		<div id="d3">
			<div id="d4"></div>
		</div>
		<p>当一个元素包含在另一个元素中时, 如果外层元素和内层元素之间没有别的元素或文本, 它们的上和下外边距也会发生合并。</p>
	</body>
</html>

3.4.2. 效果图

3.5. 假设有一个空元素, 它有外边距, 但是没有边框或内边距或填充。在这种情况下, 上外边距与下外边距就碰到了一起, 它们会发生合并。请看下图:

3.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS空元素自身外边距合并</title>
		<meta charset="utf-8" />

		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				background-color: red;
			}
			#d1 {
				margin-top: 20px;
				margin-bottom: 50px;
			}
			#d2 {
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
		<p>假设有一个空元素, 它有外边距, 但是没有边框或内边距或填充。在这种情况下, 上外边距与下外边距就碰到了一起, 它们会发生合并。</p>
	</body>
</html>

3.5.2. 效果图

3.6. 如果这个外边距遇到另一个元素的外边距, 它还会发生合并。请看下图:

3.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS多级元素外边距合并</title>
		<meta charset="utf-8" />

		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				background-color: red;
			}
			#d1	{
				margin-top: 20px;
				margin-bottom: 50px;
			}
			#d2	{
				width: 100px;
				height: 100px;
				margin-top: 70px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
	</body>
</html>

3.6.2. 效果图

4. 外边距合并初看上去可能有点奇怪, 但是实际上, 它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并, 后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并, 段落之间的上外边距和下外边距就合并在一起, 这样各处的距离就一致了。

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS合并段落外边距</title>
		<meta charset="utf-8" />

		<style type="text/css">
			body, hr {
				margin: 0;
				padding: 0;
			}
			p {
				width: 600px;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<p>外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。</p> 
		<p>第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。</p><hr/>
		<p>如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。</p>
	</body>
</html>

4.2. 效果图