前端外边距margin上下合并的解决方案

最新推荐文章于 2023-03-25 18:56:39 发布

cc超人不会飞

最新推荐文章于 2023-03-25 18:56:39 发布

阅读量577

点赞数

分类专栏：前端巩固基础文章标签： css

本文链接：https://blog.csdn.net/v587ge/article/details/106451552

版权

巩固基础同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .common{
                width: 300px;
                height: 300px;
                background-color: pink;
            }
            .c1{
                margin-bottom: 20px;
            }
            .c2{
                margin-top: 10px;
            }

            .f{
                width: 500px;
                height: 500px;
                background-color:pink;
            }
            .s{
                width: 200px;
                height: 200px;
                margin-top: 20px;
                background-color: blue;
            }

            .f1{
                border-top: 1px solid pink;   /* 第一种解决方式 设置顶部外边框，  缺点：整个父布局高度多了1px */
            }
            .f2{
                 padding-top: 1px;      /*第二种解决方式  父元素顶部设置1px的padding， 缺点：整个父布局高度多了1px */
            }
            .f3{
                overflow: hidden;  /* 第三种解决方式比较完美  不会改变布局宽高*/
            }

        </style>

    </head>
    <body>
        <div >
            <div>---------------同一块级元素内 上下外边距合并---------------</div>
            <!-- 这种情况c1的下外边距与C2的上外边距进行了合并，取最大的值 20px -->
            <div class="common c1"></div>
            <div class="common c2"></div>
            <!-- 这种情况实际用的并不多，尽量避免即可，在设计图中看到上下外边距是20px，仅c1设置一个就好 -->
        </div>
        <div>------------------------目的要求:类名为s的div距类名为f的顶部div  20px---------------------------------------</div>
        <div>--------------------如果仅设置s的顶部外边距则会出现异常情况： f的div距顶部20px，s紧贴顶部f的顶部-------------------------</div>
        <div class="f">
            <div class="s"></div>
        </div>
        <div>--------------------以下为三种解决方式：第一种:父元素设置border外边框-------------------------</div>
        <div class="f f1">
            <div class="s s1"></div>
        </div>
        <div>--------------------第二种:父元素顶部设置paddingtop  1px-------------------------</div>
        <div class="f f2">
            <div class="s s2"></div>
        </div>

        <div>--------------------第三种:父元素设置overflowr = hidden------------------------</div>
        <div class="f f3">
            <div class="s s3"></div>
        </div>
    </body>
</html>

cc超人不会飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端外边距margin上下合并的解决方案

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> .common{ width: 300px; height: 300px; background-color: pink; } .
复制链接

扫一扫

专栏目录