文章主要討論inline-block引起的高度問題变隔，以及使用vertical-align:middle;
高度出現(xiàn)莫名的小數(shù)?高度正好 卻出現(xiàn)滾動條?莫名多處一些空白懈叹？總是感覺不對齊？
讀完<<CSS權(quán)威指南>>缤削，我以為自己了解了inline-block窘哈，并且用起來也不錯(cuò)，然而亭敢，近期我發(fā)現(xiàn)滚婉，同樣的做法在不同環(huán)境竟然表現(xiàn)不一致。
這個(gè)布局之所以復(fù)雜帅刀，是因?yàn)樗鼱砍兜絭ertical-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起到作用驱犹，默認(rèn)值是normal嘲恍，如果設(shè)置為line-height:1 大小和字體大小一樣，相當(dāng)于1*16px雄驹，
行高多余字體高度的值佃牛，會除以2分別加到上下兩個(gè)邊，使得字體可以垂直居中医舆，
如果將布局換為inline,line-height導(dǎo)致的結(jié)果是不一樣的吁脱。
<div class="wrapper3">
<input class="first"/>
</div>
.wrapper3{
font-size:16px;
font-family:sans-serif;
.first{
height:20px;
box-sizing:border-box;
}
}
出現(xiàn)多余的空白，高度為22.5px
加上vertical-align:top彬向，變?yōu)?1px兼贡，bottom、text-top娃胆、text-bottom效果也為21px遍希，如果你改變，font-szie的大小里烦，高度也會隨之變化凿蒜，這已經(jīng)不是差1px的事情了,這21px不是font-size作用于標(biāo)簽之間的空白產(chǎn)生的禁谦！即使你刪除空白依然是21px!,但是效果和加上一個(gè)span是等價(jià)的。
使用line-height: 1;在字體大小不超過21px的時(shí)候是起作用的废封，子元素是繼承l(wèi)ine-height: 1;州泊，而不是繼承計(jì)算后的值
在同一行的內(nèi)聯(lián)元素會生成一個(gè)行內(nèi)框，行內(nèi)框要容的下同一行的所有元素
<div class="wrapper5">
<input class="first"/><span class="second">1213</span>
</div>
忽略這個(gè)問題漂洋，高度自然很難糾正啦遥皂！
使用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;
}
}
特意加了一個(gè).third 來驗(yàn)證vertical-align:middle;是生效的，注意.first和.second都加了 刽漂，這時(shí)"無法刪除的元素”高度沒有文本框高演训，所以不會影響"
增加.second的行高,文本框還是會垂直對齊，可見贝咙，他們是根據(jù)內(nèi)聯(lián)框?qū)R的样悟，這個(gè)框看不見，卻真實(shí)存在著
至于文本框前面的空白庭猩，出現(xiàn)是合理的窟她，這是特性，現(xiàn)在基于腳手架的項(xiàng)目容易解決這種問題蔼水，只要刪除HTML之間的空白就可以了礁苗，或者不產(chǎn)生空白
<span>1</span><
span>2</span>
不建議這樣做，會耗費(fèi)時(shí)間徙缴，可讀性也不好试伙。而且無法去除前面所說的問題=>"無法刪除的元素。"
可以試試font-size:0;至于子元素的字體大小于样，如果方便疏叨，可以為每個(gè)元素單獨(dú)指定，如果不方便 使用> * 也無妨穿剖，雖然瀏覽器從右往左解析CSS蚤蔓，很多人會覺得影響性能，其實(shí)問題不大糊余。
或者使用 :nth-child(n)
