CSS—解决外边距塌陷

最新推荐文章于 2024-04-29 15:35:16 发布

木木学长

最新推荐文章于 2024-04-29 15:35:16 发布

阅读量166

点赞数

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

本文链接：https://blog.csdn.net/qq_43599049/article/details/115029918

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值：

 <div class="a">
     <div class="b"></div>
 </div>

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

<style>
    .a {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-top: 50px;
        border: 1px solid skyblue;
    }
    
    .b {
        height: 30px;
        width: 30px;
        background-color: yellow;
        margin-top: 50px;
    }
</style>
<body>

    <div class="a">
        <div class="b"></div>
    </div>
</body>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木木学长

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS—解决外边距塌陷

嵌套块元素垂直外边距的塌陷对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值： <div class="a"> <div class="b"></div> </div>解决方案：可以为父元素定义上边框可以为父元素定义上内边距可以为父元素添加overflow:hidden<style> .a { width: 100px;
复制链接

扫一扫