span不能直接写line-height或width等属性，因其为内联元素，默认display: inline，仅支持color、font-size等少数CSS样式，需通过CSS设置display:inline-block等才能生效。
span 为什么不能直接写 line-height 或 width 属性
因为 span 是纯语义容器，不是样式属性载体——它只认 HTML 全局属性（如 class、style、id），所有排版控制必须走 CSS 路径。写成 <span line-height="2">文本</span> 完全无效，浏览器会把它当做一个自定义属性忽略。
常见错误现象：加了 line-height 却没生效；设了 width 发现不占空间；调了 margin-top 结果上下间距毫无反应。
-
line-height对默认display: inline的span不起作用，除非配合display: inline-block或包裹在块级元素中 -
width、height、margin-top、margin-bottom在 inline 元素上无效（背景可能扩展，但不影响布局流） - 真正能直接生效的内联样式只有：
color、font-size、letter-spacing、text-decoration、vertical-align（仅在行内上下文中有意义）
什么时候该用 style，什么时候该抽成 class
局部微调、一次性的视觉干预（比如某处提示文字临时加个底色），用 style 最快；但只要相同样式出现在两处以上，硬编码 style 就是埋技术债。
使用场景差异明显：
立即学习“前端免费学习笔记（深入）”；
- ✅ 适合
style：<span style="color:#666; font-size:0.9em">小号注释</span>—— 只出现一次，且无复用预期 - ✅ 适合
class：<span class="price-orig">¥199</span>—— 多处价格删除线，统一维护 - ⚠️ 避免：
<span style="color:red">错误</span>+<span style="color:red">警告</span>+ …… → 应统一为.error-text
span 嵌套过深或滥用 display: inline-block 的风险
span 本意是轻量标记，不是布局工具。强行改 display 或层层嵌套，会破坏文档流语义和可访问性。
典型问题：
- 把
span改成display: inline-block后，vertical-align行为变得不可预测，尤其混排图标/文字时容易错位 - 三层以上
span嵌套（如<span><span><span>文字</span></span></span>）让 DOM 结构臃肿，影响屏幕阅读器解析和 JS 查询效率 - 用
span包裹<p>、<div>等块级元素 → 浏览器自动修复为<span></span><p></p><span></span>，DOM 意外变形
细粒度控制必须考虑的兼容性与可访问性细节
看似简单的颜色或字距调整，实际在不同环境里表现差异很大。
关键注意点：
-
letter-spacing推荐用em或px，避免pt（屏幕渲染不一致，尤其在高 DPI 设备上） - 用
vertical-align: super做上标时，要配font-size: 0.7em，否则字号不变导致视觉失衡 - 仅靠
color区分状态（如红/绿）不符合无障碍要求，必须叠加图标、文字提示或aria-label - 如果用
span配合font-feature-settings做高级排版，得用@supports降级，不能只靠style写死
最常被忽略的是：细粒度控制不是“越精细越好”，而是“刚好够用”。一个 span 加三个 style 属性，不如一个 class 加一条 CSS 规则来得稳定、可测、易协作。
