小洛的前端技术博客Appearance
图片间隙问题
图片之间有缝隙的问题，简直就是一个bug，其实解决方法有很多种，这里介绍几种常见的解决方法。
为什么会这样？
当 <img> 作为 行内元素（display: inline） 时，默认遵循 基线对齐（vertical-align: baseline） 规则。由于字体存在 基线到下边缘的间距（受 line-height 影响），图片底部会出现 3-5px 左右的空白间隙（即使无文字，父元素行高也可能导致此问题）。
典型的场景
图片与文字同行（如 <img><span>文字</span>）
多图片行内排列（如 <img><img> 之间的底部间隙）
方法一：块级化（display: block）
css
/* 块级元素无基线对齐，间隙消失 */
img{
display:block;
}/* 块级元素无基线对齐，间隙消失 */
img{
display:block;
}方法二：垂直对齐调整（vertical-align）
css
/* 示例：top 对齐行框顶部，消除基线下方间隙，根据布局需求选择 */
img{
vertical:top/middle/bottom;
}/* 示例：top 对齐行框顶部，消除基线下方间隙，根据布局需求选择 */
img{
vertical:top/middle/bottom;
}方法三：浮动布局（float + BFC 清除）
css
/* 左浮动，脱离行内基线对齐 */
img{
float:left;
}
/* 建立 BFC，包含浮动子元素，避免父元素高度坍塌 */
.parent{
overflow:hidden;
}/* 左浮动，脱离行内基线对齐 */
img{
float:left;
}
/* 建立 BFC，包含浮动子元素，避免父元素高度坍塌 */
.parent{
overflow:hidden;
}方法四：Flexbox/Grid 布局（推荐）
css
/* 垂直居中，行内元素默认无基线间隙（Flex 容器内 `vertical-align` 失效） */
.container {
display: flex; /* 或 grid */
align-items: center;
}/* 垂直居中，行内元素默认无基线间隙（Flex 容器内 `vertical-align` 失效） */
.container {
display: flex; /* 或 grid */
align-items: center;
}