内联块inline-block的垂直间隙问题

问题背景：移动端编程里面的左右按钮布局，没有用表布局，而用了浮动（为了让2个各占一半宽度的按钮排列在一行），由于浮动元素脱离了原本的文档流，导致父元素（块元素）所占高度为0，当父元素的display属性设置成内联块inline-block时，惊奇的发现它能占用浮动元素的高度了，但是用了一段时间之后发现它有个缺点，就是底部多出一部分空隙，不知道怎么干掉，而这两个按钮恰好要放到底部，不允许下面还有空隙，代码如下。

<style type="text/css">
.box1 {
  border: 1px solid red;
  width: 100%;
}
.box2 {
  box-sizing:border-box;
  border: 1px solid;
  display: inline-block;
  width: 100%;
}
span {
  width: 50%;
  background-color: #ddd;
  display: inline-block;
  text-align:center;
  padding:0.5em 0;
  float:left;
}
</style>
<div class="box1">
    <div class="box2">
        <span>确定</span>
        <span>取消</span>
    </div>
</div>

效果如下图：

在百度上一搜，倒是有解决方案，但是没有一个能用。什么去掉换行空格啦（试过好多次，不行），设置字体大小为0啊（公司的电脑上没有成功，在家里试发现是可以的），设置margin偏移啊（鄙视这种做法，不采纳），空隙仍然在那里。最后还是功夫不负有心人，另外一篇文章里面说到可以设置vertical-align为top，这个试了可行。
所以修正代码如下：

<style type="text/css">
.box1 {
  border: 1px solid red;
  width: 100%;
}
.box2 {
  box-sizing:border-box;
  border: 1px solid;
  display: inline-block;
  width: 100%;
  vertical-align: top; /* 经过尝试发现设置成其他的值也可以消除间隙，只要设置了vertical-align */
}
span {
  width: 50%;
  background-color: #ddd;
  display: inline-block;
  text-align:center;
  padding:0.5em 0;
  float:left;
}
</style>
<div class="box1">
    <div class="box2">
        <span>确定</span>
        <span>取消</span>
    </div>
</div>

加上回家之后发现font-size设置为0的方案是可行的，所以第二种修正代码如下：

<style type="text/css">
.box1 {
  border: 1px solid red;
  width: 100%;
  font-size: 0; /* 设置成0 */
}
.box2 {
  box-sizing:border-box;
  border: 1px solid;
  display: inline-block;
  width: 100%;
  font-size: 16px; /* 覆盖掉父元素的配置 */
}
span {
  width: 50%;
  background-color: #ddd;
  display: inline-block;
  text-align:center;
  padding:0.5em 0;
  float:left;
}
</style>
<div class="box1">
    <div class="box2">
        <span>确定</span>
        <span>取消</span>
    </div>
</div>

第二种方案是不理想的，不能继承全局的字体大小，所以第一种更优。
之前还搜到一个网友的方法，把内联块儿浮动之后可以消除间隙，这个是可行，但是浮动之后又变成不占用高度空间了，又得把父元素弄成内联块，这样就死循环了。