[分享]css去除边框间的间距

当我们使用CSS美化网页时，常常会使元素之间产生一些间距。其中一个经常遇到的问题就是边框间的间距，在网页布局中经常需要去除它。下面介绍几种方法来解决这个问题。 / 方法一：使用负margin / .b...

当我们使用CSS美化网页时，常常会使元素之间产生一些间距。其中一个经常遇到的问题就是边框间的间距，在网页布局中经常需要去除它。下面介绍几种方法来解决这个问题。

 /* 方法一：使用负margin */
    .box {
        border: 1px solid #ccc;
        margin: 0;
        padding: 10px;
    }
    .box-inner {
        margin: -1px;
        padding: 10px;
    } 

这种方法需要在HTML中添加一个额外的div元素，比较麻烦。我们将里层的div的margin设为负值，这样就可以将外层div的边框与内层div的内容相邻接。

 /* 方法二：使用outline */
    .box {
        border: 1px solid #ccc;
        outline: 1px solid transparent;
        margin: 0;
        padding: 10px;
    } 

使用outline属性可以将元素的"虚拟轮廓"设置为1像素宽，而又是透明的，不会占据布局空间。这样就可以让两个元素的边框直接贴在一起了。

 /* 方法三：使用box-sizing */
    .box {
        border: 1px solid #ccc;
        box-sizing: border-box;
        margin: 0;
        padding: 10px;
    } 

最简单的方式是使用box-sizing属性。当它的值为border-box时，元素的padding和border不再增加元素的size。这种方法可以在不需要添加额外div的情况下解决边框间的间距问题。