图片上下间隙由默认基线对齐导致，因img作为行内元素会预留文字下行空间；通过设置vertical-align:top/middle/bottom可解决，其中vertical-align最直接有效，也可配合display:block、line-height:0等方案彻底消除间隙。
图片在网页中上下出现过大间隙，通常不是因为 margin 或 padding 导致的，而是因为 vertical-align 的默认对齐方式引起的。这个问题常见于图片放在行内元素（如 span、a 标签）或表格单元格中时，尤其在使用 inline-block 布局时更容易显现。
HTML 中的 img 默认是行内元素（inline element），它会和文字一样遵循基线（baseline）对齐规则。浏览器会为行内元素预留一部分下行文字的空间（比如 g、j、p、q、y 这些字母的下延部分），即使图片后面没有文字，这个空间依然存在，从而造成图片下方出现“空白间隙”。
解决办法是调整图片的垂直对齐方式，告诉浏览器不要按基线对齐。常用方法如下：
只需要给 img 或其容器加上这些样式即可：
立即学习“前端免费学习笔记（深入）”；
img {
vertical-align: top;
}除了 vertical-align，还可以结合以下方式确保间隙完全消失：
基本上就这些。vertical-align 是最轻量、最直接的修复方式，特别适用于 inline-block 布局中的图片排列问题。不复杂但容易忽略。
以上就是css图片上下间隙太大是什么原因_css间隙问题用vertical-align修复的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
483
收藏
