margin负值作用之压住相邻盒子边框

 

    <style>
        div {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: red;
        } .
    </style>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
当多个块级盒子一行显示时，如何压住相邻盒子的边框呢？
解决方法：给盒子添加margin-left: 负值（与边框相同大小），当添加了了margin后，第一个盒子向左移动一个像素，同时由于浮动，第二个盒子会紧贴上来，此时，第二个盒子再向左移动一个像素，那么就达到了盖住边框的效果，后面的盒子以此类推。
posted @ 2020-05-04 15:45  GEazzz  阅读(267)  评论(0)  编辑  收藏  举报