# 到底为什么用img标签实现icon的时候经常对不齐文字 * 抖音： * B站： > **Demo预览：** > > > > **代码 / 文件：** > > 我们来看一下 为什么同样是在行内加两个小图标 用image标签实现的 和用字体文件实现的 他们在垂直方向上的距离会有偏差 首先呢我们知道 对于image标签来说它的 vertical-align默认是baseline的 所以就意味着他肯定是 图片的底边缘 和这行文字的baseline对齐 至于这个baseline啊 前面这期视频提到过 大家可以看一下 那对于这个icon-font 它为什么会在这个位置呢 我先把它（这个截图）... 钉在这，我们来看一下这个 我找了一个在线的字体编辑器 我们来看一下这个字体 大家看这有一个baseline 跟我们画的这条线是不是一样的 所以啊进一步验证了这种icon-font呢 它也是有baseline的 那回过来可能有同学就会想到 我们能不能把这个image标签做一个 vertical-align:middle 我们来看一下啊 在这加一个vertical-align等于middle 大家看射成middle了 它明显这个图就比较偏下了 现在看还不太明显 我把这个英文先去掉 大家看是不是明显比较偏下 原因就是啊 我们的汉字字体相比于英文字体 是比较偏上的 因为英文字体里有y、j 这样的字母 我先把这个恢复过来 我们可以验证一下 这条中线在哪呢 大概就在这个位置 对于这个y、j 来说它就比较居中了 但是对于汉字来说 它就比较偏下了 所以呢用middle解决也不是特别理想 后来呢我就翻了一下 el-admin（一个第三方框架）它封装的SVG icon 因为SVG跟这个image标签一样 有同样的问题 但是呢它封装的代码里边 写了一个这样的样式 大家看首先宽高设置成1em 一个em代表着 当前这个节点的字体大小 也就说高度字体的高度 所以意味着它要保持这个icon（） 宽高跟这个字体的高度保持一致 然后呢设了一个vertical align等于-0.15em 也就意味着他让这个图标啊 在base-line的基础上向下再偏移15% 那这个15%是怎么来的我也不知道哈 不过我看了icon-font他导出来的图标 大部分15%是够用的 我们来试一下啊 我们首先我们设置一个高度 宽度就不设置了1em 然后呢 我们设一个vertical-align来等于负的0.15em 我们再来看一下效果 大家看这样就比较完美了 好处是什么呢 就是我们改变它的font-size 它也不受影响 大家看font size比如说 大家看这个图片的大小也会跟着变 最后啊再给大家分享一个 在评论区里学到的工具 就是这个icon-moon --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sunzsh.gitbook.io/xiaoshan.bug/dao-di-wei-shen-me-yong-img-biao-qian-shi-xian-icon-de-shi-hou-jing-chang-dui-bu-qi-wen-zi.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.