img 默认 display 值为 inline，属替换元素，按行内规则布局，因基线对齐和空白字符易产生间隙；可通过 vertical-align、flex、block 等方式优化。
img 元素默认 display 值是 inline
HTML 中 <img alt="css img 默认是行内还是块级_元素默认属性解析" > 是**替换元素（replaced element）**，浏览器对其默认渲染行为由 CSS 规范定义：display 初始值为 inline。这意味着它会和其他内联内容（如文字、<span></span>）在同一行排列，且只占据自身内容所需宽度，不独占一行。
为什么 inline 的 img 会“换行”或“有间隙”
常见误解是“img 看起来像块级”，其实是因为它受行内布局规则影响：
-
<img alt="css img 默认是行内还是块级_元素默认属性解析" >默认基线（baseline）对齐文字底部，下方会留出约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;
}注意 display: block 不解决所有问题
改成 block 后，img 不再参与行内格式化上下文，但可能引入新问题：
立即学习“前端免费学习笔记（深入）”；
- 无法与文字混排（除非用浮动或 flex）
- 若未设置
max-width: 100%，在窄容器中会溢出 - 响应式图片（
srcset+sizes）行为不受影响，但布局上下文变了 - 某些旧版 IE 对
inline-block支持不一致，block更稳妥
实际项目里，最常被忽略的是「基线间隙」和「父容器空白字符」——它们比 display 类型本身更容易引发布局异常。
