img元素中图片间垂直间距和水平间距产生原因？

scx_link

已于 2024-08-26 19:05:21 修改

阅读量1k

点赞数 20

分类专栏： Html+CSS+JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-08-24 09:53:06 首次发布

本文链接：https://blog.csdn.net/adminstate/article/details/141436151

版权

Html+CSS+JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

水平间距产生的原因
- 解决方式
竖直间距产生的原因
- 解决方式
使用场景

水平间距产生的原因

首先要知道的是 img元素标签是行内元素，它不会换行，除非一行放不下了，再另起一行。当界面缩放到能放下后，又自动变成一行了，所以并不是真正意思的换行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片间距产出的原因</title>
	</head>
	<body>
		<img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg">
	</body>
</html>

按住Ctrl键滚动鼠标的中间的滑轮，实现界面的缩放。
在这里插入图片描述
当紧挨着的三个img标签通过回车使源代码分别处于三行时：

还有如下的情况：
在这里插入图片描述

在这里插入图片描述

解决方式

所以相邻图片水平方向上产生的间距，和行高及行距已经基线，顶线，中线，底线是无关的。消除相邻图片之间的空白间距就避免让img标签元素之间产生空格或回车操作，应该无空格的都写到同一行内。

在这里插入图片描述
效果如下：无论界面放大或缩小，第三张图片始终都在第二行。

总结：
回车操作：表示源代码的换行，浏览器在渲染时会忽略掉，并转为一个空格；而br标签，浏览器在渲染解析时才会按换行进行操作。

当源代码中的img标签紧挨着写到同一行时：
在这里插入图片描述

竖直间距产生的原因

通过上面的动画演示，也可以看到，当第三张图片处于第二行，可以看到上下图片直接存在空白缝隙？这个是什么原因产生的呢？

以另一个例子来演示：
在这里插入图片描述
界面效果如下：

如上图所示，将一张图片放入一个未设宽高的盒子（div）里，盒子(div)的高度由图片撑起，但是底部仍有空隙。
这是因为浏览器文字类型排版存在用于对齐的基线（baseline），默认为基线对齐
在这里插入图片描述
上图即为文字基线

界面效果如下：

图片默认会与基线对齐

上方图片上打马赛克的文字写的内容有误，故打上马赛克了。

可以看到上图中的，文字并没有使图片下方的缝隙变大，这是因为图片提前预留的缝隙就是按浏览器默认字号16px(谷歌浏览器)，默认缝隙大小是16px文字的基线和底线之间的距离。如果把字号调大，可以看到图片下方的缝隙会变大。
在这里插入图片描述
因为img也是行内元素，它会假设其左右侧会有默认按基线对齐方式显示的文字。其实基线和底线是文字排版时才存在的，对图片来说不存在基线或者底线。也就是顶线，中线，基线，底线并不是图片的固有属性。而是文字的属性。但是在img为行内元素时，因为其周围可能存在文字，所以在CSS样式中img元素可以通过vertical-align属性来控制其相对于周围元素（特别是内联元素或文本）的垂直对齐方式。

在讨论img元素的基线（baseline）和底线（bottom line）时，我们需要理解这些概念通常是在字体排印（typography）的上下文中使用的
img元素并不直接参与文本的基线对齐。不过，在CSS中，img元素可以通过vertical-align属性来控制其相对于周围元素（特别是内联元素或文本）的垂直对齐方式。

vertical-align用于设置垂直对齐，仅对行内块（img， input，td）及行内元素有效

vertical-align的属性值有：
1.top ：顶部对齐
在这里插入图片描述
加粗样式
2.bottom：底部对齐

3.middle：居中对齐

4.baseline：基线对齐（默认）

解决方式

通过以上可以看到当给img标签的vertical-align属性设置为 top、bottom、middle都能解决图片下方留白问题。
或者将img元素的display属性设置为block也可以解决图片下方留白问题，但是这样img就独占一行了，不能和文本在同一行了。
如需图片和文字在一个盒子里同时居中对齐，需要同时设置vertical-align：middle和line-height。

vertical-align针对的是内联元素左右的文本和内联元素自己的垂直对齐方式，块级无效。