HTML 中图片默认以 inline 元素渲染，会保留基线（baseline）下方的空白区域，导致容器底部出现不可见却可测量的间隙；解决方法包括设置 display: block、vertical-align: top 或显式固定父容器高度。
html 中图片默认以 `inline` 元素渲染，会保留基线（baseline）下方的空白区域，导致容器底部出现不可见却可测量的间隙；解决方法包括设置 `display: block`、`vertical-align: top` 或显式固定父容器高度。
在构建响应式文章卡片（如 <article> 布局）时，你可能会遇到一个看似微小却令人困扰的问题：图片（<img>）与其外层容器（如 .image section）或边框之间存在一条细小的空白缝隙——即使已将 padding 和 margin 设为 0，该间隙依然顽固存在。
这并非 CSS 书写错误，而是浏览器对内联元素默认排版行为的忠实实现：<img> 默认属于 inline 元素，会像字母“g”或“y”一样，在行框（line box）中预留 descender 空间（即基线下方用于显示下挂字符的区域），从而在图片底部生成约 3–4px 的空白。
✅ 推荐解决方案（按优先级排序）
1. 最通用且语义清晰：设置 display: block
.image img {
display: block;
}✅ 原理：块级元素不参与行内布局，彻底消除基线对齐带来的间隙。
✅ 优势：无需调整父容器尺寸，兼容所有现代浏览器，代码简洁无副作用。
2. 保留内联特性时：使用 vertical-align
.image img {
vertical-align: top; /* 或 middle / bottom */
}✅ 适用场景：当图片需与其他内联元素（如文字、图标）水平对齐时。
⚠️ 注意：vertical-align 仅对 inline/inline-block 元素生效，若已设 display: block 则无效。
3. 强制父容器高度（如原答案所用）
.image {
height: 150px; /* 严格匹配图片尺寸 */
overflow: hidden; /* 可选：防止内容溢出 */
}⚠️ 风险：硬编码高度缺乏弹性，响应式设计中易导致裁剪或错位；仅建议在尺寸绝对固定且无缩放需求时作为临时方案。
? 完整修复示例（推荐组合）
<article>
<section class="image">
<a href="#"><img src="images/Thumbnail.gif" width="150" height="150" alt="Project thumbnail"></a>
</section>
<aside class="textBox">
<h3>Project</h3>
<p>Description goes here.</p>
</aside>
</article>/* 关键修复：消除图片底部间隙 */
.image img {
display: block; /* 根本性解决 */
/* 可选增强：确保无边框/轮廓干扰 */
border: none;
line-height: 1;
}
/* 同时清理父容器潜在影响 */
.image {
padding: 0;
margin: 0;
border: 6px inset #7079B1;
/* 移除 height: 150px —— 让布局自然适应 */
}⚠️ 额外注意事项
- 避免滥用 font-size: 0：虽可消除行高间隙，但会破坏子元素字体继承，需手动重置，不推荐。
- 检查 line-height 继承：若 .image 或其祖先设置了较大 line-height，也可能间接撑开空间。
- Dreamweaver 无关性说明：该问题与编辑器无关，是浏览器渲染规范所致；VS Code 同样会复现，验证时请以浏览器开发者工具（Elements → Computed）为准。
通过理解 inline 图片的排版本质，并采用 display: block 这一语义明确、零副作用的方案，你不仅能立即消除那条恼人的缝隙，还能写出更健壮、更易维护的 HTML/CSS 结构。
立即学习“前端免费学习笔记（深入）”；
