简记<img>下方的空白间隙

当你书写以下代码

<img src="balbal.." />

<div></div>

你会发现<img>距离<div>隔了几个空白像素

那么 Q1:这些空白像素如何产生的？

　　 A1:这是因为 水平方向上的元素垂直对齐的方式  造成的。

 

通常情况，能在一行显示的元素，display应为inline或者line-block。

如果一行上的元素高矮不一致，那么应该如何对齐这些inline?

css提供了vertical-align来确定这些元素是如何对齐的。

该属性默认值为baseline 即字母x的底部，来对齐。

而字母x，本身是有高度的，自然就出现了额外的空隙

 

Q2:如何消除这些空隙？

A2：已经知道了原因，那么解决就很简单了

1.display:block 脱离vertical-align的影响

2.给<img>的父元素设置 font-size:0 字体没有了size 空隙也就自然消失了

3.给<img>的父元素设置line-height:0 行高 也可以

4.既然是因为baseline搞的鬼，那么把<img>的vertical-align设置为top 也可以消灭空隙。