Inline-block元素兩個bug
- 兩個inline-block 元素之間如果有空格、回車掌挚、tab兵罢，那么在頁面上就有一個空隙
標(biāo)準(zhǔn)答案：將父元素的 font-size 設(shè)置為0变抽，然后在 inline-block 元素中將 font-size 設(shè)置為 14px
實(shí)際工作：使用 block 或 float 或 flex，不要使用 inline-block - 兩個不同高度的 inline-block 元素?zé)o法對齊
還有一種現(xiàn)象就是 img 元素下面無緣無故多出幾像素束昵。
標(biāo)準(zhǔn)答案：改變 inline-block 元素的 vertical-align，一般改為 top 或 middle
實(shí)際工作：使用 float（用了浮動就要清除浮動） 或 flex葛峻，不要使用
代碼
HTML
<div class="txt">
<span>hello</span>
<span>everyone!</span>
</div>
<div>
</div>
CSS
<style>
.txt{
font-size:0;
}
.txt>span{
font-size:14px;
}
div{
border:1px solid;
}
div>img{
display:inline-block;
vertical-align:bottom;
}
</style>
