【css】margin坍塌及应对办法

最新推荐文章于 2024-05-16 15:59:52 发布

richest_qi

最新推荐文章于 2024-05-16 15:59:52 发布

阅读量350

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/111415430

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

文章目录

背景

先给出源码吧

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
    .top{
        background-image: url(./images/dicos_store.png);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 200px;
    }
    .container{
        border-radius: 15px;
        background-color: #fff;
        height: 200px;
        margin-top: -30px;
        overflow: hidden;
    }
    .content{
        margin: 20px;
        font-size: 24px;
        font-weight: bolder;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="container">
        <div class="content">德克士</div>
    </div>
</body>
</html>

以上代码实现了如下图的一个效果：
在这里插入图片描述

遇到的问题

过程中遇到了margin塌陷的问题，来复现下吧。
在这里插入图片描述
为了便于观看差别，首先将div.container的背景色调整为浅粉色，因此background-color从#fff变更为lightpink，随后撤销overflow:hidden这一样式，最后就重现margin坍塌了。

解决方法

对此，我们通过触发BFC来解决margin坍塌的问题：给div.container添加样式overflow:hidden。
补充下，以下情况都可以触发BFC：

根元素<html>
float不为none
overflow为hidden | scroll | auto
position不为static | relative
display为table-cell | table-caption | inline-block

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】margin坍塌及应对办法

文章目录背景遇到的问题解决方法背景先给出源码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title&
复制链接

扫一扫

专栏目录