对inline-block的再次认知

文章主要讨论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)

对inline-block的再次认知

推荐阅读更多精彩内容