img 默认 display 值为 inline，属替换元素，按行内规则布局，因基线对齐和空白字符易产生间隙；可通过 vertical-align、flex、block 等方式优化。
img 元素默认 display 值是 inline
HTML 中 display 初始值为 inline。这意味着它会和其他内联内容（如文字、）在同一行排列，且只占据自身内容所需宽度，不独占一行。
为什么 inline 的 img 会“换行”或“有间隙”
常见误解是“img 看起来像块级”，其实是因为它受行内布局规则影响：
-
4px空隙（来自字体 descender 空间） - 父容器若含换行符或空格，会在 img 之间产生空白节点，被当作文本渲染，导致“意外间隙”
- 没有设置
vertical-align时，其对齐方式继承自父级，容易放大视觉错位
如何让 img 表现得更可控
根据使用场景选择合适方案，不是所有情况都该改成 block：
- 单图居中/独占一行：设
display: block+margin: auto - 多图水平排列无间隙：用
display: flex容器，或font-size: 0抑制空白字符，或vertical-align: top/middle/bottom - 响应式图片嵌入段落：保留
inline，但加vertical-align: middle消除基线间隙 - 需要宽高控制或 margin/padding 可靠生效：改
display: inline-block，注意它仍受基线影响
img {
vertical-align: middle; /* 消除默认基线间隙 */
}
<p>/<em> 或完全脱离行内流 </em>/
img.standalone {
display: block;
margin: 0 auto;
}</p>
注意 display: block 不解决所有问题
改成 block 后，img 不再参与行内格式化上下文，但可能引入新问题：
- 无法与文字混排（除非用浮动或 flex）
- 若未设置
max-width: 100%，在窄容器中会溢出 - 响应式图片（
srcset+sizes）行为不受影响，但布局上下文变了 - 某些旧版 IE 对
inline-block支持不一致，block更稳妥
实际项目里，最常被忽略的是「基线间隙」和「父容器空白字符」——它们比 display 类型本身更容易引发布局异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
