外边距问题

最新推荐文章于 2022-11-28 11:14:38 发布

原创最新推荐文章于 2022-11-28 11:14:38 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

web前端知识专栏收录该内容

15 篇文章

订阅专栏

外边距问题

典型例子

典型案例一

结构关系：嵌套块儿元素的垂直外边距塌陷

问题描述：当父元素没有padding，border时子元素与父元素直接相邻时，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并，最终结果是正值取结果较大的值，负值取绝对值较大的值。

表现：父子元素共同使用一个外边距（由于父类未定义border或者padding导致父类直接相邻的子元素设置外边距时，比如说设置margin-top:20px,此时刷新看到子元素并没有距离父类10px个像素，（如果父类也设置了margin-top值比如说是10px）那么会选择子类中的margin值，因为此时20是最大的，所以我们会发先整体距离上边界20px）具体演示看下方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距问题</title>
		<style type="text/css">
			body {
				margin: 0px;
				background-color: aquamarine;
			}

			.container {
				width: 300px;
				height: 300px;
				/* margin-top: 30px; */
				background-color: #00FFFF;
			}

			.con1 {
				width: 100px;
				height: 100px;
				/* 	margin-top: 40px; */
				background-color: #DEB887;
			}

			.con2 {
				width: 100px;
				height: 100px;
				background-color: #A52A2A;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="con1">
				我是父元素最相邻的元素
			</div>
			<div class="con2
				我是con2
			</div>
		</div>
	</body>
</html>

查看上面代码，此时我并没有设置margin值并且也没有设置父类的padding值和边框，此时的样式是这样的：

在这里插入图片描述

此时，如果我给父类添加一个margin-top为30px,给相邻的子类添加一个margin-top:40px,再看一下细节变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距问题</title>
		<style type="text/css">
			body {
				margin: 0px;
				background-color: aquamarine;
			}

			.container {
				width: 300px;
				height: 300px;
				margin-top: 30px;
				background-color: #00FFFF;
			}

			.con1 {
				width: 100px;
				height: 100px;
					margin-top: 40px;
				background-color: #DEB887;
			}

			.con2 {
				width: 100px;
				height: 100px;
				background-color: #A52A2A;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="con1">
				我是父元素最相邻的元素
			</div>
			<div class="con2">
				我是con2
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

那针对这样的问题如何解决呢？其实上面提到了，是由于父类没有设置border或者padding导致的问题，给父类加上border或者padding可以解决这个问题，这是在不考虑改变父类高度和宽度进行的操作。

如果考虑在不改变父类的宽度的情况下，我们选用给父类设置overflow为hidden,然后再设置margin值，看一下最终结果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距问题</title>
		<style type="text/css">
			body {
				margin: 0px;
				background-color: aquamarine;
			}

			.container {
				width: 300px;
				height: 300px;
				overflow: hidden;
				margin-top: 30px;
				background-color: #00FFFF;
			}

			.con1 {
				width: 100px;
				height: 100px;
					margin-top: 40px;
				background-color: #DEB887;
			}

			.con2 {
				width: 100px;
				height: 100px;
				background-color: #A52A2A;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="con1">
				我是父元素最相邻的元素
			</div>
			<div class="con2">
				我是con2
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

可以看到与父级相邻的元素也有了margin值并且父类的margin值也生效了。

典型案例二

结构关系：相邻元素垂直外边距合并

问题描述：当两个块儿级兄弟元素垂直方向上的margin值直接相遇，会发生合并，最终结果是正值取两者中较大值，负值取绝对值较大的值

如何理解margin值相遇，(比如说有两个div垂直排列，我给上面的div设置了一个margin-bottom：20px，下面的div设置了一个margin-top：20px，结果会显示多少呢？，结果是20px，为什么不是40px,这就是margin相遇导致其合并，选取最大值进行设置)，下面通过，效果图真正演示一下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距问题</title>
		<style type="text/css">
			body {
				margin: 0px;
				background-color: aquamarine;
			}
			.con1 {
				width: 100px;
				height: 100px;
				background-color: #DEB887;
			}

			.con2 {
				width: 100px;
				height: 100px;
				background-color: #A52A2A;
			}
		</style>
	</head>
	<body>
			<div class="con1">
				我是父元素最相邻的元素
			</div>
			<div class="con2">
				我是con2
			</div>
	</body>
</html>

两个块儿级兄弟元素正常情况下是这样排列的。

此时如果我给上面的con1加上margin-bottom:20px;
给con2加一个margin-top：30px;两个div的margin相遇结果会怎样呢？答案是两者会取最大的值30px

在这里插入图片描述

结果确实是选取的30px,那针对这样的问题如何解决的呢？

解决方法一. 可以单独给一方设置一个margin值，比如想两者间距40px,可以设置margin-bottom:40px。

解决方法二.也可以给一方添加一个div进行包裹然后按照典型案例一得格式，包裹起来给父容器设置border或者设置padding值，或者设置父级为overflow为hidden

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距问题</title>
		<style type="text/css">
			body {
				margin: 0px;
				background-color: aquamarine;
			}
			.con1 {
				width: 100px;
				height: 100px;
				background-color: #DEB887;
				margin-bottom: 20px;
			}
			.con2 {
				width: 100px;
				height: 100px;
				background-color: #A52A2A;
				margin-top: 30px;
			}
			#container
			{
			    overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="con1">
				我是con1
			</div>
		</div>

		<div class="con2">
			我是con2
		</div>
	</body>
</html>