什么是边框塌陷，如何解决

最新推荐文章于 2023-04-22 03:07:57 发布

mike_95

最新推荐文章于 2023-04-22 03:07:57 发布

阅读量2.8k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/mike_95/article/details/109146272

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

项目场景：

<style>
        .wrapper{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-left: 100px;
            margin-top: 100px;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="demo"></div>
    </div>
</body>

子元素设置了 margin-left值和 margin-top 值

问题描述：

理想中的效果图
在这里插入图片描述
但是实际的效果是

也就是说这里，水平方向的margin生效了，但是垂直方向的margin没有生效，这种现象好像父级的上边框没了，上边框塌陷了，所以称之为 边框塌陷

解决方案：

父元素添加 border: 1px solid transparent
触发盒子BFC
给子元素添加下列任一属性
1.position: absolute
2.display:inline-block
3.float:left
4.overflow:hidden
总结：边框塌陷不能被彻底解决，所有方案只能是弥补！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mike_95

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
什么是边框塌陷，如何解决

项目场景：<style> .wrapper{ width: 200px; height: 200px; background-color: red; margin-left: 100px; margin-top: 100px; } .demo{ width: 100px; heig
复制链接

扫一扫