◆ margin外边距合并问题原因:
所有毗邻的两个或者多个盒元素的margin会合并为一并共享之。毗邻的意思是同级或嵌套的盒元素,并且他们之间没有非空内容、padding或者border分隔。
◆ 父子元素margin合并问题:
在div里面有子元素div1时,若父元素div在没有设置overflow:hidden或者是border属性,则父元素div的margin-top的值为父元素div和子元素div1中的margin-top的最大值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background: pink;
}
.div {
margin: 0 auto;
margin-top: 10px;
width: 450px;
height: 450px;
background: #aaa;
}
.div1 {
width: 200px;
height: 200px;
background: red;
margin: 50px 0px;
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
</div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lC0poGSk-1575449897131)(en-resource://database/5846:1)]
◆ 父子元素margin合并问题解决办法:
- 方法一:设置父元素的overflow属性为hidden。
- 方法二:设置父元素的border属性,如:border:1px solid red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background: pink;
}
.div {
overflow: hidden;
/* border:1px solid red;*/
/* 利用overflow属性或者通过给父级元素设置border可以避免出现父级元素的
margin合并的情况,当没有设置这两个属性之一时,该div的margin-top值
会取div1的margin-top和其自身margin-top的最大值*/
margin: 0 auto;
margin-top: 10px;
width: 450px;
height: 450px;
background: #aaa;
}
.div1 {
width: 200px;
height: 200px;
background: red;
margin: 50px 0px;
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
</div>
</body>
</html>
◆ 兄弟元素margin合并问题:
当元素是兄弟元素时,在不设置float和position:absolute时,margin-bottom和margin-top会合并为两者中的最大值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background: pink;
}
.div {
overflow: hidden;
margin: 0 auto;
margin-top: 10px;
width: 450px;
height: 600px;
background: #aaa;
}
.div1 {
width: 200px;
height: 200px;
background: red;
margin: 50px 0px;
}
.div2 {
width: 200px;
background: green;
margin: 30px 0px;
height: 200px;
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVMXPgTh-1575449897133)(en-resource://database/5848:1)]
◆ 兄弟元素margin合并问题解决方法:
使兄弟元素不在同一个BFC区域下,具体做法如:将兄弟元素分别触发BFC或将兄弟元素包在不同的div下,这些不同的div再分别触发BFC。参考[BFC概念及应用](%3Ca href=“https://blog.csdn.net/songyi160/article/details/87892155”%3Ehttps://blog.csdn.net/songyi160/article/details/87892155%3C/a%3E)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background: pink;
}
.div {
overflow: hidden;
margin: 0 auto;
margin-top: 10px;
width: 300px;
height: 600px;
background: #aaa;
}
.div1 {
width: 200px;
height: 200px;
background: red;
margin: 50px 0px;
float: left;
}
.div2 {
width: 200px;
background: green;
margin: 30px 0px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>