欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

css img 适配尺寸_如何解决img标签下面的小空隙（附详细视频教程）

发布时间：2024/10/5 50 豆豆
生活随笔 收集整理的这篇文章主要介绍了 css img 适配尺寸_如何解决img标签下面的小空隙（附详细视频教程） 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

很多初学小伙伴留言说在写页面的时候碰到过这样的问题，用一个div直接包裹img时，img的下方会出现3px间距，像这样：

那其实解决起来也很简单的，刚接触的伙伴，不清楚这点也很正常。

代码：

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">.box {border: 2px solid red;}</style></head><body><div class="box"><img src="img/4.png"></div></body> </html>

那原因是什么呢？

img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），导致下方会多出来 3px 间距，其实我们在img右侧添加一个span包裹住文本，现象会更明显

有五个办法可以解决上面的问题：

第一种方法：

给div设置和img一样的高度；缺点：该方法不够灵活，一旦img尺寸改变，我们要重新设置div的高度

第二种方法：

给img设置vertical-align为除baseline以外的值，常用

第三种方法：

给img添加display:block;
这个方法是我们比较常用，但需要注意，img一旦设置为块，text-align:center；就不再生效，图片的水平居中应使用margin:auto;

第四种方法：

给img设置浮动
设置浮动会让img脱离文档流缺点：父元素高度不会被img自动撑开

第五种方法：

给div设置font-size:0;缺点：该方法会使div中的文字消失

根据实际情况选择合适的方法；让我的女神更完美！

2020Electron-HTML+CSS+JS构建跨平台桌面应用程序https://pan.baidu.com/s/1CQoJj0AjRvqM97gXVWPKtw

Web前端从入门到精通（HTML+CSS全套）https://pan.baidu.com/s/1IaO6LN3L7QEqrs78vvRuYg

整理的前端视频教程，初学的伙伴，或者想提升的伙伴，可以留言！

总结

以上是生活随笔为你收集整理的css img 适配尺寸_如何解决img标签下面的小空隙（附详细视频教程）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。