CSS中margin负值巧布局

margin负值实现细边框

我们先准备五个div盒子，并设置好浮动和2px的实线黑色边框，看看效果

中间的边框线挨在了一起致使边框变粗成了4px，这时使用margin负值就可以解决这个问题

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            float: left;
            width: 150px;

            height: 300px;
            border: #000 solid 2px;
        }

        .fu {
            margin-left: -2px;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="fu">2</div>
    <div class="fu">3</div>
    <div class="fu">4</div>
    <div class="fu">5</div>
</body>

我们给后面四个盒子指定左边框为-2px，这时后面的盒子对的左边框就会覆盖到前一个盒子的右边框上，从而实现边框只有2px，效果图如下：

你学会了吗？我是正在学习前端的小白@Ben-studying,欢迎大家评论区留言交流呦！

posted @ 2021-04-10 14:50  Ben-studying  阅读(65)  评论(0)    收藏  举报