解决img放入标签中上下出现间隙问题

问题描述：

今天在写项目的时候突然遇到了这个问题，自己将img放入div中，但是照片顶部并没有和div顶部重合，一开始以为自己设置了边距，找半天没找出原因，下面来分享几种解决这个问题的方法

---

问题分析：

对于不是块级元素的可见元素都是内联元素，这里有个注意点就是这些内联元素特性都是“行布局”形式。对于img它是内联元素，他默认的对齐方式都是和他的父元素的baseline去对齐，与此同时你撑开的高度却是元素整体的高度，所以这就会造成间隙。

---

解决方案：

1、第一种方式就可以直接将内联元素设置成块级元素(display:block) 2、第二种方式就不要想第一种方式那么暴力了，因为改变元素的属性可能对后面的布局造成影响，那我们就想既然默认对齐方式是baseline，那我们就改变它的对齐方式啊，如果我们想消除空隙那就直接将这个元素的vertical-align设置成top就可以解决了。 3、给内联元素设置浮动 4、最后一种方案是我比较喜欢的也是常用的一种方式，将父元素的font-size设置成0就可以解决了