外边距问题
典型例子
- 典型案例一
结构关系：嵌套块儿元素的垂直外边距塌陷
问题描述：当父元素没有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>
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
