经典bug------margin塌陷和margin合并(解决方法BFC)

野生小米椒

已于 2022-11-03 22:09:07 修改

阅读量548

点赞数

分类专栏：三大基础语言文章标签： bug css css3

于 2020-09-09 10:22:54 首次发布

本文链接：https://blog.csdn.net/x1037490413/article/details/108474386

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

文章目录

- 一:margin塌陷
- 二:margin合并

一:margin塌陷

设置margin-top没有用,只有比它的父级元素还大时,才移动并且一起移动,
父子嵌套的元素,垂直方向的margin会粘合在一起,取最大的那个值

解决方法:如何触发一个盒子的bfc（块级格式化上下文）,在父级盒子上用这些方法任意一个都行,根据实际情况选择使用
1.position:absolute;设置定位后自然就变成了bfc元素了
2.display:inline-block
3.float:left/right
4.overflow:hidden

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .wrapper {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-top: 100px;
        margin-left: 100px;
    }

    .content {
        width: 50px;
        height: 50px;
        background-color: gray;
        margin-left: 50px;
        margin-top: 150px;
    }
</style>

</html>

二:margin合并

需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。
重叠只会出现在垂直方向,水平方向上的margin累加,而兄弟结构垂直方向上的margin是合并的

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <span class="span1">span1</span>
    <span class="span2">span2</span>
    <div class="demo1">demo1</div>
    <div class="demo2">demo2</div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .span1 {
        background-color: pink;
        margin-right: 100px;
    }

    .span2 {
        background-color: gray;
        margin-left: 100px;
    }
    .demo1{
        background-color: #ffc;
        margin-bottom: 100px;
    }
    .demo2{
        background-color: #f80;
        margin-bottom: 100px;
    }
</style>

</html>

可以用bfc的方法解决,但是不建议,因为会改变结构
垂直方向上会取最大值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .content{
      border: 1px solid bisque;
    }
    .father {
      width: 200px;
      height: 200px;
      background-color: red;
      margin-bottom: 100px;
    }
    .son {
      width: 200px;
      height: 200px;
      margin-top: 100px;
      background-color: green;
    }
  </style>
  <body>
    <div class="content">
      <div class="father"></div>
      <div class="son"></div>
    </div>
  </body>
</html>