伪元素解决相邻父子元素垂直外边距重叠问题

最新推荐文章于 2022-10-22 00:48:12 发布

aoys602066

最新推荐文章于 2022-10-22 00:48:12 发布

阅读量300

点赞数

原文链接：http://www.cnblogs.com/qtbb/p/11433521.html

版权

    <style>
        .box{
            width: 400px;
            height: 400px;
            background: gold;
        }
        .box1{
            height: 100px;
            width: 100px;
            background: palegreen;
            margin-top:50px;
        }
        .box2{
            height: 100px;
            width: 100px;
            background: palevioletred;
        }
        .box:before{
            display: table;
            content: "";
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <!-- 
       1. 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
            如上：box1如果设置外边距，与父元素box1发生重叠，box和box1同时margin-top：50px
            如果给box2 设置margin-top:50px,则不会影响父元素，直接box2向下移动50px

        2. 使用一个空的 table 标签可以隔离相邻的两个父子元素，阻止外边距的重叠
             为防止子元素box1和父元素box相邻，可以在box1之前添加一个伪元素 table
     -->
</body>

转载于:https://www.cnblogs.com/qtbb/p/11433521.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aoys602066

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪元素解决相邻父子元素垂直外边距重叠问题

<style> .box{ width: 400px; height: 400px; background: gold; } .box1{ height: 100px; widt...
复制链接

扫一扫