CSS小技巧——1.margin负值解决边框叠加问题

当我们设置浮动后经常会遇到两个盒子的边框叠在一起变粗的情况，比如：

（自己写的一个小例子）

<ul>
    <li class="x">盒子1</li>
    <li class="x">盒子2</li>
</ul>

 css如下：

.x {
      float: left;
      height: 200px;
      width: 150px;
      border: 5px solid red;
    }

为了看的明显一点，把边框的像素放到5px。是这样的效果：

明显看到盒子1与2的边框叠加到了一起，在实现页面效果的时候并不美观，因此，我们可以通过设置margin负值解决这个问题。

.x {
      float: left;
      height: 200px;
      width: 150px;
      border: 5px solid red;
      margin-left: -5px;
    }

margin-left的值根据边框像素定，我的边框是5px，设置的margin-left即为-5px，如果是上下排列的盒子同理，可以设置margin-bottom负值。

最后效果如下：