display: block能消除图片底部空隙，因img默认inline时预留descender空间，设为block后退出行内格式化上下文，baseline对齐失效；但会强制换行，不适用于图文混排场景。
display: block 能立刻消除图片底部空隙，但不是万能解法——它只在图片不需要参与文本流时真正安全。
为什么 display: block 有效
因为 <img> 默认是 display: inline，浏览器按文字排版规则处理它：预留 descender 空间（给字母 g、y 下延部分），哪怕没文字也照留。设成 display: block 后，它退出行内格式化上下文（IFC），baseline 对齐逻辑彻底失效，空隙归零。
- ✅ 兼容所有现代浏览器，包括 IE8+
- ✅ 不影响图片渲染质量或响应式行为
- ❌ 会强制换行，破坏图文并排结构（比如图标 + 文字按钮）
- ⚠️ 若父容器是
flex或grid，display: block仍生效，但此时其实没必要——这些布局天然不产生该空隙
什么时候该用 display: block
只在以下场景才推荐直接加：
- banner 图、轮播图、头图等独立占行的图片
- 父容器本身已是
flex/grid，且你只是顺手“保险起见”加一层 - 图片作为列表项（
<li>）里的唯一内容，且无需与文字同行
别在 <span></span>、<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 或按钮内部的 <img> 上硬套 display: block——它会让文字被挤到下一行，视觉上反而更糟。
加了 display: block 还有缝？先查这三处
空隙大概率不是 CSS 没生效，而是别的东西在撑空间：
- 父元素有
margin-bottom（尤其是<p></p>标签自带外边距） -
<img>标签后存在 HTML 换行或空格，被渲染为约 4px 的空白符（仅 inline 场景可见，但 block 后已不相关；不过开发者工具里容易误判来源） - 图片自身导出带透明底或未裁切（Figma/Sketch 导出 PNG 常见），CSS 完全无法干预
打开开发者工具，逐层检查 computed styles 中的 margin、padding 和盒模型高度，比反复调 vertical-align 更快定位真因。
真正要稳，得先判断图片是否必须留在行内流里——如果答案是“否”，display: block 就是最干净的选择；如果“是”，那就得转向 vertical-align: bottom 或重构父容器为 flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
