前言
其实刚开始我发现这个问题的时候也不知道是什么原因,因为当时刚学了一个vertical-align
属性所以就设置了vertical-align
为middle
但是并没有解决问题,后来查了资料才知道是因为vertical-align的默认值的问题。
原因:主要是因为图片的垂直对齐方式vertical-align
引发的,默认值是baseline
,默认为此值时图片下方就会多出3px。
解决方案:
1.将图片的垂直对齐方式vertical-align
的值设置为bottom
,就可以解决这个问题。
2.将图片display设置为block,并且指定width和height。
3.设置图片所在的容器元素和width和height与图片一样。