大家好，如何修复img标签下的小间隙（详细教程）相信很多的网友都不是很明白，包括也是一样，不过没有关系，接下来就来为大家分享关于如何修复img标签下的小间隙（详细教程）和的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
代码：
!DOCTYPE htmlhtmlheadmeta charset=’utf-8′ /meta name=’viewport’ content=’width=device-width, initial-scale=1’title/titlestyle type=’text/css’.box {border: 2px 纯红色； }/style/headbodydiv class=’box’img src=’img/4.png’/div/body/html
那么原因是什么呢？
img是一个类似于text的标签元素。最后会在末尾添加一个空白字符（匿名文本），从而导致下方多出3px 间距。事实上，我们在img的右侧添加一个span来包裹文本。这种现象会更加明显
解决上述问题有五种方法：
第一种方法：
设置div与img相同的高度；缺点：该方法不够灵活。一旦img的大小发生变化，我们就需要重置div的高度。
第二种方法：
设置img的vertical-align为baseline以外的值，常用
第三种方法：
添加display:块；到图片。这种方法是我们常用的，但是需要注意的是，一旦将img设置为一个块，text-align:center；将不再生效。图像的水平居中应使用margin:auto；
第四种方法：
设置img为float会使img脱离文档流。缺点：父元素的高度不会被img自动扩大。
第五种方法：
设置div的font-size:0；缺点：该方法会让div中的文字消失
根据实际情况选择合适的方法；让我的女神更加完美！
2020Electron-HTML+CSS+JS构建跨平台桌面应用https://pan.baidu.com/s/1CQoJj0AjRvqM97gXVWPKtw 提取码： 2
原创文章，作者：小su，如若转载，请注明出处：https://www.sudun.com/ask/122031.html
用户评论
野兽之美
终于找到解决这个问题的方法了！之前一直很困扰img标签下面那个 pesky 的小空隙，看了你的教程简直是茅塞顿开，操作起来也很简单，真的太感谢你啦！
有19位网友表示赞同！
箜明
这个“小空隙”问题困扰了我好久，总是找不到答案！这篇教程讲得详细清楚，图片和步骤都很有帮助。试了一下成功解决了这个问题，真是太高兴了！我要分享给我的朋友们，让他们也摆脱这个烦恼！
有11位网友表示赞同！
゛指尖的阳光丶
我以前也是忽略这个「小空隙」的问题的，但最近发现网页美观度很重要，看了这篇教程后才知道原来还有这么多方法可以解决这个问题。不过有些方法还是需要一定的代码基础才能理解。
有9位网友表示赞同！
琴断朱弦
这篇文章虽然很详细，但是对于新手来说，一些技术术语还是比较难理解。能不能再补充一些更加通俗易懂的解释？这样对初学者更有帮助！
有5位网友表示赞同！
来自火星的我
网页排版要精益求精！这篇教程真不错，讲解img标签下面小空隙的解决方案很到位。终于可以告别那些令人眼 sore 的空白了!
有6位网友表示赞同！
巷口酒肆
我试了一下，这些方法确实都能解决 img 标签下面的空隙问题，但是效果有时候不太理想。可能还需要进一步调整才能达到完美的视觉效果吧？
有7位网友表示赞同！
代价是折磨╳
虽然这篇教程给出了很多解决方案，但我更倾向于使用 CSS 的 margin 方法来解决这个问题，它简单直接，而且很容易理解和使用！
有15位网友表示赞同！
海盟山誓总是赊
这个技巧好棒！之前还被img标签下面的空隙头痛呢！这篇教程太救了，以后肯定还会参考你的文章！
有20位网友表示赞同！
不要冷战i
我尝试按照教程中的步骤操作，结果还是没有解决问题。可能是我的代码写错了？或者网页框架的问题吧？不太明白。
有18位网友表示赞同！
大王派我来巡山！
这个“小空隙”问题其实很多人都遇到了，这篇教程分享的技巧很实用！希望能帮到更多人！
有10位网友表示赞同！
花花世界总是那么虚伪﹌
我主要用的是 WordPress 网站，这篇教程用的解决方案能不能直接应用呢？如果可以的话就太好了！
有7位网友表示赞同！
陌然淺笑
网站美观真是个永恒话题啊，这篇文章讲解 img 标签下的空隙问题很有价值，希望看到更多关于网页排版设计的小技巧分享！
有7位网友表示赞同！
恰十年
这个“小空隙”我早就不怎么在意了，毕竟影响不大吧？ 不过这篇教程挺详细的，如果想要追求极致完美的用户体验的话可以参考一下。
有13位网友表示赞同！
那伤。眞美
每次遇到这样的问题都要自己去搜索解决方案，太麻烦了吧！希望以后能看到更多关于网页开发的全面教程！
有5位网友表示赞同！
残留の笑颜
图片大小和布局影响网站体验，必须认真对待！这篇教程讲解得很到位，感谢分享!
有17位网友表示赞同！
颓废人士
这个空隙问题确实很别扭，但是解决起来也挺简单的。这篇教程做得很细致，特别是图文结合真的很棒！
有12位网友表示赞同！
信仰
我学习网页开发的时间不长，很多细节还不太掌握，这篇文章对我很有帮助，尤其是关于 img 标签的知识点，让我受益匪浅！
有11位网友表示赞同！