margin塌陷、margin合并的解决方案

最新推荐文章于 2024-02-18 21:45:45 发布

凌云的视界

最新推荐文章于 2024-02-18 21:45:45 发布

阅读量230

点赞数

分类专栏：前端布局

本文链接：https://blog.csdn.net/weixin_38680881/article/details/118694501

版权

margin塌陷 margin合并 BFC CSS布局前端开发

关键词由CSDN通过智能技术生成

前端布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端的日常大多还是跟样式打交道，快速渲染页面和解决样式bug是一个合格的前端最基础的能力，这次记录一下两个样式小问题:margin塌陷和margin合并。

margin塌陷

问题起源：

在有父子关系的子元素里，期望让子元素距离父元素的顶部50px,如果直接只给子元素margin-top：50px会怎样呢？

代码实现：

<!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>
*{
    margin: 0px;
}
.father{
    width: 200px;
    height: 200px;
    background-color:red
}
.son{
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-top: 50px;
}
</style>
<body>
<div class="father">
    <div class="son">
    </div>
</div>
</body>
</html>

实现效果：
在这里插入图片描述

由效果图我们可以发现，子元素并没有如我们所期待的那样距离父元素顶部50px，而是让父元素距离顶部有了50px的距离，也就是父元素的顶棚对子元素来说没有作用，相当于塌陷下来了，这就是所谓的margin塌陷。

解决方案：

方案1：子元素的margin-top改为padding-top
方案2：给父元素添加样式overflow:hidden,触发BFC

由此延伸一下BFC的知识点:

BFC，块级格式化上下文，它是一个独立的渲染区域，让处于BFC内外的元素相互隔离，使内外元素的布局不会相互影响。

触发BFC的几种方式：

1. overflow不为visible
2. float 不为none
3. position 为absolute/fixed
4. display 为inline-block/table-cell/table-caption

margin合并

问题起源： 两个兄弟元素，一个设置下边距为50px,一个设置上边距为30px,那么它们之间的间距是否是80px呢？

代码实现：

*{
    margin: 0px;
}
div{
    width: 200px;
    height: 200px;
}
.bro1{
    margin-bottom: 50px;
    background-color: yellow;
}
.bro2{
    margin-top: 30px;
    background-color: green;
}

实现效果：
在这里插入图片描述

由审查元素的效果图我们可以发现，两个元素之间的间距是50px,也就是它们的margin-top和margin-bottom合并了，显示的是较大值。

解决方案：
方案1：给其中一个兄弟元素套一个父元素，并且设置为overflow:hidden
在这里插入图片描述

方案2：通过数学计算的方式只给其中一个元素margin-top或margin-bottom,比如给bro1 margin-bottom:80px

凌云的视界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin塌陷、margin合并的解决方案

前端的日常大多还是跟样式打交道，快速渲染页面和解决样式bug是一个合格的前端最基础的能力，这次记录一下两个样式小问题:margin塌陷和margin合并。margin塌陷问题起源：在有父子关系的子元素里，期望让子元素距离父元素的顶部50px,如果直接只给子元素margin-top：50px会怎样呢？代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .
复制链接

扫一扫

专栏目录