span标签不支持直接写line-height等css属性，必须通过style属性或class引入css；其默认display为inline，不应强行改为块级；排版控制应优先用class复用，仅局部微调时用style。
span 标签本身不支持行内属性控制排版
直接在 <span></span> 标签里写 line-height、vertical-align 或 letter-spacing 这类样式，浏览器会忽略——因为这些不是 HTML 属性，而是 CSS 属性。HTML 的 span 本身只有少数几个全局属性（如 id、class、data-*、style），没有排版相关的原生属性。
真正起作用的是 style 属性或外部 CSS 规则。常见错误是把 CSS 当成 HTML 属性写：<span line-height="1.5">文本</span>，这完全无效，且可能被解析为自定义属性但不起样式作用。
-
style是唯一合法的“行内样式”入口，所有排版控制必须通过它或 class 注入 CSS - 不要尝试用
span模拟块级行为（比如强行换行或宽度控制），它默认是display: inline，改display值会破坏其语义和流式布局预期 - 若需响应式细粒度控制（如不同屏幕下字间距不同），
style写死值不如用class配合媒体查询
用 style 属性做最小粒度的排版干预
当只影响某几个字符、且不值得抽离成 class 时，style 最直接。但要注意优先级和可维护性：
-
letter-spacing控制字距：例如<span style="letter-spacing: 0.05em">标题文字</span>，注意单位推荐用em或px，避免用pt（在屏幕渲染中不一致） -
line-height对单个span通常无效——它只对生成行框的元素（如块级或 inline-block）生效；若真要调高某段文字的行高，得配合display: inline-block或包裹在div中 -
vertical-align只在行内上下文中有意义，常用于对齐图标或上标：<span style="vertical-align: super; font-size: 0.7em">®</span> - 多个样式用分号分隔，末尾分号可省略，但建议保留以避免后续追加时出错
class 方案更适合复用与维护
一旦相同排版逻辑出现在两处以上，硬编码 style 就成了技术债。比如统一的强调色、缩放字号、或禁用用户选中：
- 定义
.text-smallcaps { text-transform: uppercase; letter-spacing: 0.1em; }，然后<span class="text-smallcaps">按钮文案</span> - 需要兼容老浏览器时，
font-feature-settings这类高级排版属性必须配@supports或降级方案，不能只靠style写死 - 避免过度嵌套
span实现多层样式（如<span class="bold"><span class="red"><span class="small">...</span></span></span>），应合并为<span class="bold red small">...</span> - CSS-in-JS 或 Shadow DOM 场景下，
span的 class 可能被 scoped，需确认样式作用域是否覆盖到目标元素
容易被忽略的继承与重置问题
span 默认继承父元素几乎所有文本相关样式（font-family、color、font-size 等），但某些属性不继承（如 margin、padding）。实际调试中常因“没生效”误判，其实是被父级样式覆盖了：
- 用浏览器开发者工具检查 computed styles，看目标属性是否被
!important或更具体的选择器压制 - 如果父容器设了
font-size: 12px，子span用font-size: 14px是绝对尺寸，但用font-size: 1.2em则基于父级计算——这点在嵌套深时极易出错 -
white-space和word-break这类属性作用于块级容器，对span单独设置通常无效；要控制换行，得让其父级（如p或div）承担该职责 - 字体加载期间，
span内容可能闪动或 fallback 不一致，若依赖特定字重/字宽做排版，需配合@font-face的font-display: optional或 JS 检测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
