inline-block之间空隙的两三事

前端

inline-block空隙的缘由

此处引用一段知乎@贺师俊 的回答。

此乃历史问题。不难理解，空白字符压缩（white space collapse）是西文排版的必然结果。SGML、TeX都是如此。不过对于不使用空格作为词分界的语言，比如东亚语言来说，就造成了问题。所以其实这是行内（inline）的问题（inline-block也是将其本身作为inline，内部作为block）。

inline-block空隙的解决方法

方法一

全部排到一行

方法二

利用折行的注释标签达到全部排到一行的效果。

1
2
3
<button>按钮1</button><!--
--><button>按钮2</button><!--
--><button>按钮3</button>

方法三

目前我认为比较美观的方法如下：

1
2
3
<button>按钮1
<button>按钮2
<button>按钮3</button>

去掉每个inline元素的尾部标签，浏览器依然可以正常解析。
最后一个inline元素要加上尾部标签是为了兼容IE。