图片与边框空白间隙怎么消除

这并非 CSS 书写错误，而是浏览器对内联元素默认排版行为的忠实实现： 默认属于 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 结构。

今天关于《图片与边框空白间隙怎么消除》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！