CSS中margin负值巧布局

margin负值实现细边框

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


image.png

中间的边框线挨在了一起致使边框变粗成了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,效果图如下:


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录 Day01标签行元素 Day02表单元素css选择器伪类选择符行内元素块元素表格 Day03文本相关属性列表...
    Moquyun阅读 535评论 0 0
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,628评论 0 6
  • CSS命名规范 不能以数字为开头,也不能是数字 遵循行业规范,例如:header头部、nav 导航、footer尾...
    晚月川阅读 401评论 8 2
  • CSS三个大核心模块:盒模型 、浮动和定位,其余的都是细节。 网页布局就是把网页元素(文字,图片等)资源放入盒子里...
    组团学阅读 393评论 0 0
  • 1、CSS笔记: 点击链接后退页面: 回到上一个网页 ——修改placeholder提示的样式: 1.除IE外通用...
    倚剑闯天涯_阅读 828评论 1 2