解决插入img图片底部空隙问题（原因+解决方案）

最新推荐文章于 2024-01-31 12:41:52 发布

原创

最新推荐文章于 2024-01-31 12:41:52 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #前端 #css3 #html #css

本文介绍了在HTML中插入图片时底部出现空隙的原因和两种解决方案。图片默认与文字基线对齐，通过调整`vertical-align`属性或将其转换为块级元素可消除空隙。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我兴高采烈的准备了一个div盒子^^

然后给它加了一个红色的边框^^

然后把我心爱的倪妮放进去 ^^

？？？为什么插入图片底部会有缝隙呢！！

其实这是因为图片默认是和文字基线对齐（baseline）的，这里以小写字母j为例

有点像小学英语本中四线三格的第三线

所以图片会留有空隙

那么第一个解决办法就是改变图片的对齐方式vertical-align：

给图片的垂直对齐方式vertical-align属性改为底线对齐bottom即可，当然其他对齐

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吱昂张……

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

第一章面试题基础篇（HTML+CSS）

欢迎来到我的博客！

08-09

2111

CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/reset.css 是一个css文件，用来重置css样式的。normalize.css 为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。

学习 HTML+CSS 这一篇就够了

li520_fei的博客

03-17

3409

文章目录学习 HTML+CSS 这一篇就够了！HTML 简介一、网页1 .什么是网页2. 什么是 HTML3.网页的形成4.网页总结二、浏览器1. 常用浏览器2.浏览器内核三、 Web 标准（重点）1. 为什么需要 Web 标准2. Web 标准的构成HTML标签一、HTML 语法规范1. 基本语法概述2.标签关系二、HTML 基本结构标签1. 第一个 HTML2. 基本结构标签总结三、开发工具1. 网页开发工具2. VSCode 工具生成骨架标签新增代码4.1 文档类型声明标签4.2 lang 语言种

1 条评论您还未登录，请先登录后发表或查看评论

li中插入img图片间有空隙的解决方案

10-25

在li中纯放图片img,出现的bug是图片之间有3px的间隙,给li加高度也无效,解决图片间有空隙方法如下:

图片底侧空白缝隙的解决办法

qq_54598875的博客

04-01

601

图片底侧空白缝隙的解决办法

解决图片底部有空白空隙问题

qq_37875903的博客

09-27

1217

原因：图片底部默认和文字的基线对齐，所以会有空白间隙解决方法： 1.给图片设置vertical-align属性： vertical-align:middle/bottom/top; 2.把图片转换成块级元素： display:block;

img底部空白间隙的问题

m0_51328823的博客

03-22

375

img底部空白间隙的问题先看代码： <!DOCTYPE html> <html lang="zhCn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>

image图片之间的间隙消除

Garbrielle的博客

11-17

787

产生原因：由于img元素默认的垂直对齐方式为基线对齐vertical-aligh: baseline。给img标签添加样式；给img标签添加样式。

JS无缝滚动图片实现与技巧

在JavaScript中实现图片无缝滚动的完美解决方案通常涉及CSS和JavaScript的巧妙配合，以便在图片连续滚动时消除视觉上的空隙。这个特定的代码示例展示了如何使用HTML、CSS和JS来创建一个无缝滚动的效果，主要关注于...

如何清除图片下方多余空隙，简单学懂处理方法及原理

Henry13133333的博客

08-08

1308

div 里面放个img，发现div边框却没有包住img，底部留下了一丝空隙... 解决方法 ①：给父级一个 font-size：0；解决方法 ① 其原理：img这个内联可能会被当作字符串看待(⊙ˍ⊙) 默认的字体样式影响了它。那么，既然因为他是内联才这样，我们不如让他变...???????????? 解决方法 ②：给 img 一个 display:block; 解决方法 ② 块级元素自然就 ╮(╯▽╰)╭ ，但是 ❗ 但是，如果你的图需要居中，那么text-align:cente

img标签插入图片下方有空隙，怎么解决？

最新发布

设计师工作日常

01-31

599

页面中的img标签插入图片后，与下方元素有空隙，有什么快速解决的方法呢？

如何解决img标签下面的小空隙

关注我！带你一路 "狂飙" 到底！

11-17

543

很多初学小伙伴在写页面的时候碰到过这样的问题，当我们用一个div直接包裹img，img的下方会出现3px间距，如图：代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title&g

img 固定在父容器底部_img图片与容器下边界的缝隙的解决方式

weixin_39970689的博客

01-13

262

今天在给图片弄hover遮罩时，发现遮罩的下方与图片的下边界没有对齐，而是多了4px左右，这里就记录下几个解决方案今天在给图片弄hover遮罩时，发现遮罩的下方与图片的下边界没有对齐，而是多了4px左右，这里就记录下几个解决方案。通常在img图片的父级容器是块级元素时，就会造成如下的现象：.css_img_main{border: 1px solid #f00; width: 475px;}我们看...

html网页图片下方空隙太大,网页制作中图片上下间为什么会有空隙？解决办法...

weixin_34727107的博客

06-18

2459

尽管已经是老掉牙的东西了，而且IMG在html中出现空隙的老式浏览器好多已经一去不复返了，但还是要给大家普及一下原因及原理。造成图片在IE下与容器下边界有空隙的原因图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离(这个距离和 font-size，font-family 相关，不一定是 5px)，所以设置 vertical-align:to...

img图片元素下多余空白解决方案

bennett2009的专栏

07-06

984

在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳，供大家参考。 1、将图片转换为块级对像即，设置img为： display:block; 在本例...

CSS之垂直对齐

qq670471201的博客

11-19

459

CSS之垂直对齐 vertical-align: baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的底端与行中最低的元素...

CSS | 解决html中img标签图片底部存在空白缝隙的问题

青春木鱼的博客

06-22

6654

在不对垂直对齐方式进行调整的状况下，图片（底部）默认是和文本基线对齐（baseline）的，因为基线对齐，所以，图片的下方就会产生一条空白缝隙的状况

解决图片底部有空白间隙的问题

sinat_38944746的博客

11-12

1156

解决图片底部有空白间隙的问题

img标签的底部间隙问题

jane900的博客

09-14

813

首先来看一下img标签在div中的底部间隙造成img标签的底部间隙的原因 img标签为行内元素(inline)，默认对其方式为vertical-align: baseline(基线对齐) 解决img标签底部间隙的几种方法方法一：将对其方式改为底线对其 img { vertical-align: bottom; } 方法二：修改行高，使行高变小，这样基线下方的位...

去除图片img下间隙的方法

喵喵的博客

04-25

2257

在一个容器放入图片时，容器大小会比图片大，因为有的文字可能会出于基线，撑开盒子。 解决方案：（1）body{ font-size: 0px; } （2）img{display: block; } （3）img{ vertical-align: middle; } ...