默认是display:inline的行内盒子，但作为可替换元素能设宽高、响应box-sizing，垂直margin受baseline对齐影响，需用vertical-align控制对齐而非margin。
图片元素默认是行内盒子，但行为接近行内块
<img> 元素在 CSS 中的显示类型（display）默认为 inline，所以它属于「行内盒子（inline box）」。但和纯文本类行内元素（如 <span></span>、<em></em>）不同：<img> 是**可替换元素（replaced element）**，浏览器会为其内置宽高解析逻辑，因此它能响应 width 和 height 设置——这点完全违背普通行内元素“不能设宽高”的规则。
- 它不会独占一行，但也不会被文字“挤碎”，而是像一个有尺寸的“原子”嵌入行流中
- 垂直方向的
margin（margin-top/margin-bottom）**看似无效**，其实是受基线对齐（baseline alignment）影响：默认与父容器文本基线对齐，下方留出空间给字母 descender（如 g、y），造成“下边距不生效”的错觉 -
vertical-align是控制其垂直定位的关键属性，不是margin
盒模型各层都生效，但默认 box-sizing 是 content-box
虽然 <img> 是行内盒子，但它完整遵循标准盒模型结构：内容区（图像本身）、padding、border、margin 全部可设置且可见。不过要注意：
- 默认
box-sizing: content-box，所以width: 200px; padding: 10px; border: 2px solid red;会让总宽度变成200 + 20 + 4 = 224px - 若想让
width指代整个可见框（含 padding + border），需显式写box-sizing: border-box——这对响应式图片布局更可控 -
padding和border在垂直方向仍会撑开行高（line-height），可能意外拉高整行，而不仅仅是图片自身
常见踩坑：图片下方留白、margin 不生效、响应式失效
这些现象几乎都源于对行内盒子特性的误判：
-
图片底部多出空白：本质是基线对齐导致，解决方法不是加
margin-bottom: -4px这种魔法数字，而是vertical-align: middle或vertical-align: top，或干脆display: block -
设了
margin-top却没反应：行内盒子的垂直 margin 不参与外边距折叠，也不推动其他行内元素，它只作用于自身在行框中的位置偏移 —— 此时应优先检查vertical-align和父容器line-height -
百分比
width在父容器未设宽时失效：因为行内元素的百分比宽高计算依赖包含块（containing block），而默认inline的包含块是行框（line box），不是父块级容器；解决方案是设display: block或display: inline-block
推荐实践：按场景选择 display 类型
不要硬扛行内盒子限制，用 display 主动切换行为：
- 单图展示、需居中/响应式/设宽高 →
display: block，再配合margin: 0 auto或 flex 容器 - 图文混排、需与文字对齐 → 保留
inline，但必须加vertical-align: top/middle/bottom - 需要设宽高 + 行内排列（如图标组）→
display: inline-block，此时width/height/margin全面生效，且不破坏行流
img.icon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
vertical-align: middle;
}
真正容易被忽略的，是把 <img> 当成“普通块元素”去调试 margin 和对齐——它骨子里仍是行内盒子，只是浏览器悄悄给了它特殊待遇。理解这个前提，才能避开 80% 的布局意外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
