文章主要讨论inline-block引起的高度问题，以及使用vertical-align:middle;
高度出现莫名的小数?高度正好 却出现滚动条?莫名多处一些空白？总是感觉不对齐？
读完<<CSS权威指南>>，我以为自己了解了inline-block，并且用起来也不错，然而，近期我发现，同样的做法在不同环境竟然表现不一致。
这个布局之所以复杂，是因为它牵扯到vertical-align、line-height、font-size、font-family和css的继承。
同样的字体大小，不同的font-family，字体的高度是不一样的。
codepen 地址https://codepen.io/xiaodun/pen/qJjevo
我的浏览器是chrome
首先
*{
margin:0;
padding:0;
}
.wrapper1{
font-size:16px;
font-family: cursive;
}
.wrapper2{
font-size:16px;
font-family:sans-serif;
}
前者是18px 后者是21px cursive和sans-serif 都是浏览器的通用字体。
这里line-height起到作用，默认值是normal，如果设置为line-height:1 大小和字体大小一样，相当于1*16px，
行高多余字体高度的值，会除以2分别加到上下两个边，使得字体可以垂直居中，
如果将布局换为inline,line-height导致的结果是不一样的。
<div class="wrapper3">
<input class="first"/>
</div>
.wrapper3{
font-size:16px;
font-family:sans-serif;
.first{
height:20px;
box-sizing:border-box;
}
}
出现多余的空白，高度为22.5px
加上vertical-align:top，变为21px，bottom、text-top、text-bottom效果也为21px，如果你改变，font-szie的大小，高度也会随之变化，这已经不是差1px的事情了,这21px不是font-size作用于标签之间的空白产生的！即使你删除空白依然是21px!,但是效果和加上一个span是等价的。
使用line-height: 1;在字体大小不超过21px的时候是起作用的，子元素是继承line-height: 1;，而不是继承计算后的值
在同一行的内联元素会生成一个行内框，行内框要容的下同一行的所有元素
<div class="wrapper5">
<input class="first"/><span class="second">1213</span>
</div>
忽略这个问题，高度自然很难纠正啦！
使用vertical-align:middel;
<div class="wrapper6">
<span class="second">1213</span>
<input class="first"/>
<div class="third">123</div>
</div>
.wrapper6{
line-height:1;
.first{
height:40px;
box-sizing:border-box;
vertical-align:middle;
}
.second{
font-size:16px;
display:inline-block;
font-family:sans-serif;
background-color:red;
vertical-align:middle;
}
.third{
float:left;
height:16px;
margin-top:12px;
background-color:red;
}
}
特意加了一个.third 来验证vertical-align:middle;是生效的，注意.first和.second都加了 ，这时"无法删除的元素”高度没有文本框高，所以不会影响"
增加.second的行高,文本框还是会垂直对齐，可见，他们是根据内联框对齐的，这个框看不见，却真实存在着
至于文本框前面的空白，出现是合理的，这是特性，现在基于脚手架的项目容易解决这种问题，只要删除HTML之间的空白就可以了，或者不产生空白
<span>1</span><
span>2</span>
不建议这样做，会耗费时间，可读性也不好。而且无法去除前面所说的问题=>"无法删除的元素。"
可以试试font-size:0;至于子元素的字体大小，如果方便，可以为每个元素单独指定，如果不方便 使用> * 也无妨，虽然浏览器从右往左解析CSS，很多人会觉得影响性能，其实问题不大。
或者使用 :nth-child(n)
