2回答

好帮手慕夭夭

2019-08-23

已采纳

你好同学，图片的间隙不是因为margin导致的，它是行内元素的一个特殊现象。原理的话，和vertical-align有关系。同学现阶段可能对于原理理解起来比较难，老师给你讲解你先作为了解，等以后知识层面丰富了，再回顾就好理解了。

行内元素的vertical-align 的默认值是 baseline。这是一个西文排版的概念。所以写一段字母更好理解，如下：

可以看到，出现在baseline下面的是g的那个尾巴，这就是导致为什么图片默认会有一个间隙。即使只有图片没有文字，只要图片的vertical-align 默认值是 baseline，就会存在这个空白间隙。

这个空白就相当于与文字的一个默认排版造成的，所以设置 line-height 设置为0，或者font-size：0 都可以清除间隙。或者最直接的方式改变图片的vertical-align的值，例如让图片与文字底部对齐。

祝学习愉快，望采纳。

2

慕桂英2021900

2019-08-23

同学你好，不知道你是使用什么标签的布局的。

我说一下自己解决这个问题的办法，我是使用dl,dt,dd进行布局的，当我把图片放到dt中的时候图片将容器下方撑大了4个像素，解决办法是给图片设置img{display: block;}或者设置dt的高度与图片等高（div同理）都可以解决缝隙的问题。

至于你疑问我觉得是不是设置了font-size后使img变成一个区块标签了或者将两个标签之间空格消除了（个人倾向于后者）？

PS：经验交流，仅作参考

0

hermouthYan

h 是的，就是为什么会存在缝隙然后用了font-size:0;之后又消除了。用的div布局然后给每一个添加了左浮动

h019-08-23

共1条回复