CSS之解决父子外边距重叠和高度坍塌的问题

最新推荐文章于 2022-09-11 19:46:09 发布

极客研究者

最新推荐文章于 2022-09-11 19:46:09 发布

阅读量301

点赞数

分类专栏： CSS样式表文章标签： html

本文链接：https://blog.csdn.net/qq_34550459/article/details/105573161

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>解决父子外边距重叠的问题</title>
    <style>
        .outer{
            width:200px;
            height:200px;
            background-color: seagreen;
        }

        /*使用before伪元素
        解决父子元素外边距重叠的问题
         */
        /* .outer::before{ */
            /* content:""; */
            /*块级表格*/
            /* display:table; */
        /* } */

        .inner{
            width:100px;
            height:100px;
            background-color:sienna;
            margin-top:100px;
        }

        /*可以同时解决外边距重叠和高度坍塌问题 */
        .clearfix::before,.clearfix::after{
            content:"";
            display:table;
            clear: both;
        }
    </style>
</head>
<body>
        <div class="outer clearfix">
            <!-- 以在父子元素之间,添加一个元素将其隔开 -->
            <div class="inner"></div>
        </div>    
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之解决父子外边距重叠和高度坍塌的问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录