去除 inline-block 元素间隙

[hexuanzhang]

去除 inline-block 元素间隙

原因

通常在写代码时，会通过换行或回车等方式，使得 HTML 结构变得更清晰，但这样会导致 inline-block 元素之间会产生一些间隙。 这些不经意间的间隙往往导致在盒模型计算时，会产生一些误差，因此需要通过 CSS 把这些间隙去除。 Demo

<div id="demo">
  <div>我是一个div</div>
  <div>我是一个div</div>
  <span>我是一个span</span>
  <span>我是一个span</span>
  <div>我是一个div</div>
  <span>我是一个span</span>
</div>

解决方案

• 将 HTML 写在一行

  这种是最直接的解决方案，但也让人难以接受，特别是对于有代码洁癖的人来说

<div id="demo">
  <div>我是一个div</div><div>我是一个div</div><span>我是一个span</span><span>我是一个span</span><div>我是一个div</div><span>我是一个span</span>
</div>

• font-size: 0

由于间隙是由换行或回车所产生空白符所致，因此在不影响布局的情况下可以通过控制字体大小来调整空白符（不考虑低版本浏览器）。 Demo

参考资料

• inline-block元素间间隙产生及去除详解
• 去除inline-block元素间间距的N种方法