盒子的高度比图片多4px问题

盒子的高度比图片多4px问题

如图所示

这里我给图片设置了高度等于200px，图片在网页中的高度也是200px，没有问题。

但是当我检查box盒子时，发下box盒子的高度是204px，比图片的高度多出了4px；
在查阅资料后发现这里是因为img标签是行内标签，而行内标签默认的是基线对齐而不是底线对齐，如图所示：会给英文字母预留下4px的高度。这就导致图片下方多出了4px，从而导致盒子的高度多出4px。
解决方法：
1.把img标签转换为块元素，因为块元素默认是底线对齐，就不会出现这个问题；
2.给img标签设置vertical-align: bottom;属性，将img的对齐方式改为底线对齐。