这是一个demo网页的截图

代码如下

<div class="container">
  <div class="item">123</div><div class="item">456</div>
</div>

我们希望他们能在一行展示并拥有高度属性，于是我们有了下面的样式代码

<style>
  .container {
    display: block;
  }
  .item  {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    border: 1px solid;
  }
</style>

可是，有一天，这个页面变成了这样

为什么？经过检查，发现网页的代码变了

<div class="container">
  <div class="item">123</div>
  <div class="item">456</div>
</div>

那么，我们只是加了个回车，为什么他们之间会有间距？

因为在inline-block的布局方式下，两个item之间的回车、空格，也会被视为inline的元素，占据一个空格的位置。但是，在我们的代码编写过程中，优化代码、增加缩进与换行是很正常的事情，那如何避免呢？
其实有一种比较黑科技的做法。

  .container {
    display: block;
    font-size: 0;
  }
  .item  {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    border: 1px solid;
    font-size: 12px;
  }
</style>

成功了，原理也很简单，将整个container的字体大小设置成0，那中间的空格，也本设置成了0，自然不会再占位，但代价就是内部的item需要单独设置字体大小。
至于是否有一劳永逸的解决办法？
以前我们使用float + BFC 或者 float + clearfix，现在我们使用flex布局。

为什么我会聊这个问题

聊到这个古老的inline-block的问题，其实是因为，之前在做小程序的时候有类似下面一段代码，表现也挺好。

  <view>
    今天<text>天气</text>真好
  </view>

但是有人有强迫症，喜欢格式化代码，于是代码变成了下面这样

  <view>
    今天
    <text>天气</text>
    真好
  </view>

乍看一下没问题，但看一下页面

？？？
眼熟的问题，但是，这个问题是有终极解决方案的。

  <view>
    <text>今天</text>
    <text>天气</text>
    <text>真好</text>
  </view>

永远不要让你的文字裸奔，因为你永远不知道会不会有一个有强迫症的同事，帮你优化代码格式。