神奇的缝隙（CSS图片篇）
大家知道这张图片
下面为什么总是有个缝隙吗
代码很简单啊
就一张图片
然后一个 div
div仅仅设置了一个大小
和一个背景颜色
那这个问题使我想到了
之前遇到的另一个问题
就是两张图片中间有个缝隙
那这个中间的缝隙呢
当时就是这样解决的
把中间的空格都删掉，大家看就没有了
但是呢我们仔细看
我们会发现
他这个上下的缝隙和
左右的缝隙差不多（大小）
我们把它加一个 font-size 试一下
大家看上下也变大了
那我们把
div和 img 之间的空格都删掉呢
大家看！也是不起作用
但是我们可以断定
他一定是跟文字有关系
我们在中间加几个文字大家看
图片和文字是基线对齐的
所以他导致了下面会有一条缝隙
那下面的这点缝隙是留给一些
比如说像“g”这样的字母
那基线是哪条线呢
其实这就有点像我们那个
4线格
这是第一条线就是 top
这是中间那条线middle
这是基线
然后呢下边这是bottom
也就是说：正好对应了
我们那个 vertical-align 的四个属性
那图片默认 display 是 inline 属性
所以呢他默认也是基线对齐的
那我们来改一下这个 vertical-align
img
vertical-align: top
大家看，它顶部对齐
bottom
底部对齐
贝斯兰极限对齐
所以呢即使我们没有文字
大家看
（或者）如果你不设置baseline的话
他也是下面有条缝的 （因为vertical-align默认为baseline）
解决方法
很容易我们就给加一个 top
或者 bottom
都可以甚至我们把它浮动
起来也是可以解决的
再或者我们不让他用inline了
我们让他 display 等于 block
他也是可以解决的
好！了解了这个呢我们再来看一个 bug
这是一个小伙伴发来 demo
大家看这个图片
和下面的 dnv 之间也总是有个缝隙
产生这个缝隙的原因
就是因为
这个以 img 默认是
display 等inline的
所以呢他会采用基线对齐
我们可以验证一下
我们在这里
给这个 li 加一个背景颜色先
我们用 #3e3e3e
然后呢我们把它的宽度改小一点 (为了后面能有空间 写文字）
40px 吧
好接下来呢我们在图片后面写个文字
比如说 h
大家看！它是基线对齐的
g
看到了吗
所以呢我们解决这个问题很容易
（我先把它恢复回来）
我们就把img加一个
display 等于 block
大家看！或者
我们
给img加一个 vertical-align
等于 top
也是可以解决的
再或者我们让他浮动起来
float 等于 left 或者 right 都行
最后更新于