1回答

好帮手慕慕子

2019-06-13

同学你好， 不知道你说的图片下面与格子之间有空隙， 具体指的是哪里呢？ 如果是指图片下方有空白间隙的话， 可以参考下面的解释理解

1、 首先要理解图片下面的空隙是由于图片默认基线对齐造成的。 示例代码

效果图：

上图红色的那根线就是文字的基线，字母 x 的底部刚好在基线上（基线：小写字母 x 的底部）。行内元素的vertical-align默认基线对齐，而图片默认是行内元素，同样也是基线对齐，所以会出现上图的结果。

2、 即使是div中只有图片， 这个空隙仍然存在。我们可以理解为在图片前面或者后面有一个看不见的文本节点与图片基线对齐，所以不管div中是否有文本，图片下面总是有一个空隙，示例：

3、图片下面的空隙是由于图片默认基线对齐造成的。想要去掉这个空隙，最简单的方法就是改变图片的对齐方式。所以可以设置vertical-top；让图片以文字顶部对齐， 就可以消除下面的空白了

这里目前阶段理解起来可能会有点困难， 同学可以先当做知识点积累起来， 随着学习的深入， 再理解就会容易一点的。

如果还有疑惑的话， 建议： 可以详细的描述一下具体指的是哪里， 再次提问， 我们会继续为你解答的

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~

5

hherlock_bourne

h 原来图片是基线对齐方式！我本来还想直接问“为什么设置vertical-align:top就能消除呢？”的呢，还幸亏加上了几个字，不然助教可能要看视频才知道我再说啥了~~哈哈，下次我备注上视频多少秒处~

h019-06-13

共1条回复