Inline-Block 间隙消除

Inline-Block 间隙消除
慢才后生float 元素之间是没有间距的。inline-block 兄弟元素之间,如何像 flaot 元素那样,去掉 inline-block 元素间的间隙?
方法一:父元素设置 font-size 为 0,子元素单独再设置字体大小
方法二:设置字符间距 letter-spacing,或单词间距 word-spacing
这个方法的原理有点像一所用的 font-size,具体做法是给父元素一个 letter-spacing 或者 word-spacing 的负值(稍微大一点,比如 -6px),子元素再调整为 0 即可,具体使用字符间距还是单词间距其实大同小异。
方法三:直接采用使用 Flex 或 float 布局(这样处理的三栏式布局没必要用 inline-block)
方法四:设置 margin-right 为负值
用 margin 负值来抵掉元素间的空白,不过 margin 负值的大小与上下文的字体和文字大小相关,并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px 时,Chrome 下元素之间的间距为 8px, 而 Firefox 下元素之间的间距为 4px。所以这个方法并不通用,也相对比较麻烦,因此不太推荐使用。
以下方式不规范,不推荐!!!
方法五(通过修改 html 格式):
html
1 | <ul> |