情景
容器不設(shè)置高度放妈，里面存有一張圖片盐肃，假設(shè)圖片高度是100px寸士，則容器高度可能為103px，可能很多人都知道怎么去除這3px漾峡，但是你知道為什么圖片下面會(huì)多出3px像素嗎？
引出vertical-align屬性
<div><span></span></div>
一個(gè)容器元素喻旷，里面有個(gè)空span生逸，按照w3c規(guī)范，會(huì)形成一個(gè)高度為0的line-box且预，但是如果設(shè)置span為display: inline-block槽袄，span所形成的inline-box的高度依然是0，但line-box有了高度锋谐。參考w3c規(guī)范得知原因就在于line-box的行首有一個(gè)寬度為0的strut遍尺，strut撐起了line-box。
然后把span換成圖片 <div><img src="" style="height: 100px;"></div>
此時(shí)容器高度為103px涮拗，為什么不是100px乾戏，因?yàn)関ertical-align在起作用。
正是因?yàn)榍懊嫣峒暗膕trut與img相互作用導(dǎo)致的三热。
將strut想象成一個(gè)寬度為0的x字符鼓择，內(nèi)容之間是baseline對齊，baseline是字符x的底部就漾，而img的baseline就是圖片的底部呐能，于是x的底部和img的底部對齊，但是x因?yàn)閘ine-height作用抑堡，實(shí)際占用區(qū)域是大于x本身的摆出，即x的上下還會(huì)占用空間，這就導(dǎo)致img下面出現(xiàn)了間隙夷野，這個(gè)間隙實(shí)際上是x占用的空間懊蒸。
可以直接這樣寫 <div>x<img src="" style="height: 100px;"></div>，效果更明顯
如何去除這個(gè)間隙
1悯搔、間隙是由x的內(nèi)容區(qū)域超出了x的底部導(dǎo)致骑丸，那么縮小x的內(nèi)容區(qū)域即可舌仍，x的內(nèi)容區(qū)域大小由line-height控制，但不能直接設(shè)置x的line-height通危，因?yàn)閤是虛擬的strut铸豁，其line-height繼承自父容器div，因此將父容器的line-height變小菊碟，x的內(nèi)容區(qū)域（content area）就變小节芥，小到內(nèi)容區(qū)域比x字符本身還小，下方間隙就沒了逆害。
2头镊、font-size設(shè)為0，這個(gè)方法需要line-height關(guān)聯(lián)font-size魄幕，如line-height：1.5相艇，本質(zhì)還是設(shè)置line-height
3、改變對齊方式纯陨，如top坛芽，bottom，middle對齊等翼抠，對齊方式改變了咙轩，也就不存在strut底部內(nèi)容區(qū)域超出對齊線了
4、img快狀化阴颖，直接占一行活喊，不再生存line-box，沒有了strut
