Inline-block元素两个bug
- 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
标准答案：将父元素的 font-size 设置为0，然后在 inline-block 元素中将 font-size 设置为 14px
实际工作：使用 block 或 float 或 flex，不要使用 inline-block - 两个不同高度的 inline-block 元素无法对齐
还有一种现象就是 img 元素下面无缘无故多出几像素。
标准答案：改变 inline-block 元素的 vertical-align，一般改为 top 或 middle
实际工作：使用 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>
