HTML5+CSS3之父子元素外边距塌陷问题解决

cloudOnSkyline

已于 2022-06-22 14:26:00 修改

阅读量260

点赞数

分类专栏： HTML和CSS 文章标签： css3 html5 html

于 2022-05-10 15:40:07 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/124689618

版权

HTML和CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

问题描述：一般情况下，如下图代码所示，当给子元素设置上外边距时，该外边距会传递给其父元素，这就是所谓的父子外边距塌陷。

<!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>父子外边距塌陷解决</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .son {
            width: 150px;
            height: 150px;
            background-color: tomato;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

问题解决：

下面给出五种解决方法，将相应代码添加至父元素即可

（1）给父级加上上边框

border-top: 1px solid #fff;

（2）给父级添加overflow属性

 overflow: hidden;

（3）给父级设置行内块模式

 display: inline-block;

（4）给父级设置浮动

 float: left;

（5）给父元素设置绝对定位

position: absolute;

除了第一种方法会额外给父元素添加一个上边框外，所有运行效果皆同下图所示

cloudOnSkyline

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3之父子元素外边距塌陷问题解决

问题描述：一般情况下，如下图代码所示，当给子元素设置上外边距时，该外边距会传递给其父元素，这就是所谓的父子外边距塌陷。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
复制链接

扫一扫

专栏目录