关键点在于如何处理相邻元素的边框线。
基本用法
最常见的用法是使用css的 元素选择器
,代码示例如下:
See the Pen 元素选择器消除相邻元素边框线 by chenxin (@awhitemouse) on CodePen.
这种方法对付一般性的需求是没有问题的,但是如果遇到了比较特殊的情况就出问题了,比如这样:
因为换行的原因导致中间元素没有右边框的问题被暴露出来了。
margin-right负值
为了解决换行导致的样式问题,需要保证每个元素的左右边框都存在。
那么问题转换成了如何将两个元素的相邻边框压缩成1个边框。
☝️一个很好的办法就是使用 margin-right 负值。代码示例如下:
See the Pen margin-right负值解决相邻边框线的问题 by chenxin (@awhitemouse) on CodePen.