面试题:margin的兼容问题?或者叫margin垂直方向合并问题?(两个盒子margin-bottom和margin-top之间的关系?)...

最新推荐文章于 2020-07-16 20:12:54 发布

weixin_33752045

最新推荐文章于 2020-07-16 20:12:54 发布

阅读量950

点赞数

原文链接：https://juejin.im/post/5c14c669f265da615e055aff

版权

在垂直方向上,margin值合并问题,如果两个同级的块级元素,上边的一个盒子设置margin-top,下面的一个盒子设置margin-top,两个盒子之间的距离,并不是他们的margin之和,而是取最大的那个值. 总结:我们在写代码的时候,注意一下,所以在写项目的时候,我们尽量在垂直方向上写一致就可以了,只设置margin-top或者设置margin-bottom就行了,不要两个都写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>59</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background: lightgreen;
            margin-bottom: 50px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: darkorchid;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
复制代码

weixin_33752045

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题:margin的兼容问题?或者叫margin垂直方向合并问题?(两个盒子margin-bottom和margin-top之间的关系?)...

在垂直方向上,margin值合并问题,如果两个同级的块级元素,上边的一个盒子设置margin-top,下面的一个盒子设置margin-top,两个盒子之间的距离,并不是他们的margin之和,而是取最大的那个值.总结:我们在写代码的时候,注意一下,所以在写项目的时候,我们尽量在垂直方向上写一致就可以了,只设置margin-top或者设置margin-bottom就行了,不要两个都写&lt;...
复制链接

扫一扫