在网页开发中，开发者经常会遇到即使已经设置了 margin: 0、padding: 0 甚至 border: 0，图片元素之间仍然存在无法解释的间隙。这种现象尤其在使用 picture 元素包裹 img 标签，并试图实现无缝布局时更为常见。理解这些间隙的根本原因，是实现像素完美布局的关键。
1. HTML空白符引起的水平间隙
HTML解析器在处理标签之间的换行符、空格和制表符时，会将它们视为一个或多个空白字符，并最终渲染为一个单一的空格。当相邻的元素是 inline（内联）或 inline-block（内联块）类型时，这个渲染出的空格就会在它们之间产生一个可见的水平间隙。
例如，以下HTML结构中，<picture> 元素之间存在换行和缩进，这些空白符会被浏览器解释为可见的空格：
<section>
<picture>
<img class="bg_img" src="public/img/pic0.jpg">
</picture>
</section>
<section>
<picture>
<img class="bg_img" src="public/img/pic1.jpg">
</picture>
<picture>
<img class="bg_img" src="public/img/pic2.jpg">
</picture>
<img class="bg_img" src="public/img/pic3.jpg">
<picture>
<img class="bg_img" src="public/img/pic4.jpg">
</picture>
</section>
<section>
<picture>
<img class="bg_img" src="public/img/pic5.jpg">
</picture>
</section>尽管 picture 元素默认通常是 inline，当其内部的 img 元素被设置为 width: 100vw; height: 100vh; 时，每个 picture 元素将占据整个视口宽度，因此水平间隙可能不会直接体现为图片之间的横向空隙，但如果 picture 元素是并排布局的，空白符将是导致水平间隙的主要原因。
立即学习“前端免费学习笔记（深入）”；
解决方案：
消除HTML空白符引起的水平间隙有几种方法：
-
精简HTML代码： 将相邻的内联或内联块级元素标签紧密连接，不留任何空白符。
<section><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture></section><section><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture></section><section><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture></section>
这种方法虽然有效，但会降低HTML代码的可读性。
-
CSS font-size: 0： 在父容器上设置 font-size: 0 可以消除子元素之间由空白符产生的间隙，因为这些间隙本质上是文本字符。
.parent-container { font-size: 0; } .parent-container > * { /* 恢复子元素的字体大小 */ font-size: initial; } -
使用Flexbox或Grid布局： 这是现代CSS布局中推荐的方法。Flexbox或Grid布局能够更好地控制子元素的排列和间距，并且不会受到HTML空白符的影响。
section { display: flex; /* 或 display: grid; */ /* 其他布局属性 */ }
2. 内联元素基线对齐与行高引起的垂直间隙
图片（<img>）默认是内联元素，或者其父容器 picture 也是内联元素。内联元素会像文本一样，基于文本基线进行对齐。即使图片自身的高度与容器高度一致，基线对齐的特性也会导致图片下方留出一些额外的空间，这部分空间通常用于容纳下行字母（如 g, j, p, q, y 的下半部分）。这个额外的空间就是我们看到的垂直间隙。
line-height 属性定义了行盒的总高度。默认情况下，浏览器的 line-height 值通常略大于 font-size，这会导致即使没有文本，内联元素也会占据一个带有额外垂直空间的行高。
考虑以下CSS，它为图片设置了全屏尺寸，但并未处理行高：
*{
padding:0;
margin:0;
box-sizing: border-box;
}
html, body{
width:100vw;
height:100vh;
}
.bg_img{
width:100vw;
height:100vh;
object-fit: cover;
object-position: center;
}在这种情况下，即使 margin 和 padding 都为0，图片之间仍然可能出现垂直间隙。
解决方案：
-
设置 line-height: 0： 在包含图片元素的父容器或直接在图片元素上设置 line-height: 0，可以有效地消除因行高导致的垂直间隙。
* { padding: 0; margin: 0; box-sizing: border-box; line-height: 0; /* 关键：消除垂直间隙 */ } html, body { width: 100vw; height: 100vh; } .bg_img { width: 100vw; height: 100vh; object-fit: cover; object-position: center; }这种方法简单有效，但需要注意如果容器内有其他文本内容，其行高也会受影响。
-
设置 vertical-align 属性： 将图片的 vertical-align 属性设置为 top、middle 或 bottom，可以改变图片相对于基线的对齐方式，从而消除图片下方的额外空间。
.bg_img { /* ... 其他样式 ... */ vertical-align: bottom; /* 或 top, middle */ } -
将图片设置为块级元素： 如果图片不需要内联行为（即不需要与文本或其他元素并排），将其设置为 display: block 是最直接的解决方案，块级元素不会受到基线对齐和行高问题的影响。
.bg_img { display: block; /* ... 其他样式 ... */ }
3. 综合解决方案与最佳实践
为了彻底消除图片元素间隙，通常需要结合多种策略。以下是一个推荐的综合方法：
-
全局CSS重置： 确保所有元素的默认 margin 和 padding 都被清除，并设置 box-sizing: border-box 以简化尺寸计算。
* { margin: 0; padding: 0; box-sizing: border-box; } -
针对水平间隙（如果存在）：
- 推荐使用Flexbox或Grid布局 来管理容器内元素的排列。
- 如果必须使用 inline-block 且不想精简HTML，可以在父容器上设置 font-size: 0。
-
针对垂直间隙：
- 在父容器或相关元素上设置 line-height: 0。
- 或者，将图片元素设置为 display: block。
- 或者，设置 vertical-align: bottom。
最终示例（结合了原始问题和答案的优化）：
假设目标是实现全屏背景图片序列，且图片之间无任何间隙。
HTML结构保持可读性：
<section> <picture><img class="bg_img" src="public/img/pic0.jpg"></picture> </section> <section> <picture><img class="bg_img" src="public/img/pic1.jpg"></picture> <picture><img class="bg_img" src="public/img/pic2.jpg"></picture> <picture><img class="bg_img" src="public/img/pic3.jpg"></picture> <picture><img class="bg_img" src="public/img/pic4.jpg"></picture> </section> <section> <picture><img class="bg_img" src="public/img/pic5.jpg"></picture> </section>
CSS样式：
/* 全局重置，并解决垂直间隙 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
line-height: 0; /* 消除内联元素基线对齐导致的垂直间隙 */
}
html, body {
width: 100vw;
height: 100vh;
overflow-x: hidden; /* 防止水平滚动条 */
}
/* 对于图片容器或图片本身 */
.bg_img {
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center;
display: block; /* 将图片设置为块级元素，彻底避免内联元素问题 */
}
/* 如果 section 元素需要并排排列，且内部有 inline-block 元素，可以考虑： */
section {
display: flex; /* 或其他布局方式 */
/* font-size: 0; 如果有内联块元素且不想用 flex/grid */
}注意事项：
- line-height: 0 可能影响容器内所有文本的显示，如果容器内有文本，请谨慎使用或针对特定元素应用。
- display: block 会改变元素的流体行为，使其独占一行。如果需要图片并排显示，应考虑Flexbox或Grid布局，并配合 line-height: 0 或 vertical-align 解决垂直间隙。
- HTML空白符问题在现代CSS布局（如Flexbox和Grid）中几乎不再是问题，推荐优先使用这些布局方式。
总结
图片元素之间出现意外间隙是前端开发中的常见挑战，其根源在于HTML的空白符处理机制以及内联元素的基线对齐和行高特性。通过理解这些底层原理，并结合使用HTML结构优化、CSS line-height: 0、vertical-align、display: block，以及现代布局技术如Flexbox或Grid，开发者可以有效地消除这些间隙，实现精确和无缝的网页布局。选择哪种解决方案取决于具体的布局需求和对代码可读性的权衡。
