关键点在于如何处理相邻元素的边框线。

基本用法

最常见的用法是使用css的 元素选择器,代码示例如下:

See the Pen 元素选择器消除相邻元素边框线 by chenxin (@awhitemouse) on CodePen.

这种方法对付一般性的需求是没有问题的,但是如果遇到了比较特殊的情况就出问题了,比如这样:

因为换行的原因导致中间元素没有右边框的问题被暴露出来了。

margin-right负值

为了解决换行导致的样式问题,需要保证每个元素的左右边框都存在。

那么问题转换成了如何将两个元素的相邻边框压缩成1个边框。

☝️一个很好的办法就是使用 margin-right 负值。代码示例如下:

See the Pen margin-right负值解决相邻边框线的问题 by chenxin (@awhitemouse) on CodePen.