问题重现

现在需要写一个选项卡，有2个选项可以切换。如是就写下了下面的代码：

 <div class="container">
 <div>选项卡一</div>
 <div>选项卡二</div>
 </div>
 .container {
 padding: 20px;
 }
 .container div{
 display: inline-block;
 width: 50%;
 text-align:center;
 padding: 6px;
 border: 1px solid #3b89ed;
 box-sizing: border-box;
 } 

按照样式所写的，2个选项应该在一行上显示，毕竟设置了display: inline-block;和width: 50%;的。然而，事实并不是如此，而是这样：

为什么会是这样呢，

这代码不按你想要的样子显示呀！

当然，我们可以设置width:49%;来解决，

但这并不是我们想要的，我们想要的是为什么会这样，

通过万能的百度，终于找到了问题产生的原因：

问题成因

产生这个的原因是空白折叠现象！

什么是空白折叠现象？

对于我们大多数人的习惯来讲，大都喜欢利用空格或者换行来调整文章的文字结构。这样往往可以使我们可以更轻松的阅读。但是，在HTML中却不允许我们这么做，这是为什么呢？原来，设计人员比我们考虑的更多。

因为我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。如果想生成过个空格，需要用 来处理。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

前面的都好理解，最后一句又是什么意思呢？

是这样的：

 <div class="container">
 <div>选项卡一</div>//这里有换行，在页面上会显示一个空格。
 <div>选项卡二</div>
 </div>

是不是感觉这样好坑？

那怎么解决呢？

解决方法

方案一

既然回车会有空格，那我就不回就是了......

 <div class="container">
 <div>选项卡一</div><div>选项卡二</div>
</div>

效果如下：

这个是可以解决问题的，

但是，

Alt+Shift+F,格式化代码一下，有还原了。

方案二

既然是空格，能不能隐藏了呢？

display:none;

opacity:0;

visibility:hidden;

都不行，因为这是空格，是一个符号，那么

font-size:0;

测试了一下，完美解决，

 .container {
 padding: 20px;
 font-size: 0;
 }
 .container div{
 display: inline-block;
 width: 50%;
 text-align:center;
 padding: 6px;
 border: 1px solid #3b89ed;
 box-sizing: border-box;
 font-size: 14px;
 }

效果如下：