span是唯一专为修饰“文字中某几个字”设计的无语义行内容器，不换行、不占块级空间、不自带样式；若需设宽高或上下间距，须先改display为inline-block或inline-flex。

直接用 包裹目标文字，再配 CSS 类控制样式——这是唯一安全、语义干净、不影响布局的行内修饰方式。别试图用

或

去套单个词，也别靠内联 style 属性硬写，那样后期难维护、易出错。

为什么必须用 而不是其他标签

是 HTML 中唯一专为「文字中某几个字」设计的无语义内联容器。它不换行、不占块级空间、不自带样式，浏览器渲染时和裸文本完全一致——除非你主动加 CSS。

• 会强制换行、破坏行内流，塞进段落里会导致布局错位
• 或 带语义，纯为强调，不该只为变色或加下划线滥用
• 和 已退化为表现层标签，现代项目应避免
• 重复用 id 绑定样式会违反唯一性原则，必须用 class

text-decoration: underline 为什么不能直接加在父容器上

因为 text-decoration 作用于整个元素的文本内容，且具有继承性。哪怕你只希望“保存”二字有下划线，但父级

一加 text-decoration: underline，括号里的数字 {{row.box.length}} 也会被划上——这不是 bug，是规范行为。

• 修复方式：把 {{'SaveTitle'| translate}} 单独包一层
• CSS 里只对 .underline-text 设 text-decoration: underline
• 确保 .btn-save 本身移除 text-decoration，否则可能叠加生效
• 如果父级已有全局下划线规则，可用 .btn-save .underline-text { text-decoration: underline; } 确保优先级

给 加宽高/上下 margin 为啥没反应

因为 默认是 display: inline，行内元素天生无视 width、height、margin-top、margin-bottom。DevTools 里看到 computed 值是 auto 就对了。

• 需要宽高或垂直间距？先改 display：用 inline-block（推荐）或 inline-flex
• display: inline-block 保留行内位置，又能设 padding、margin、max-width、vertical-align
• 要居中对齐内部文字？display: inline-flex + align-items: center 更精准，但 IE11 不支持
• 绝对不要写 span { display: block; } —— 它会打断文本流，导致换行

最容易被忽略的是可访问性：仅靠颜色或下划线区分信息不够。比如红色错误提示，得补 aria-label 或图标；下划线链接需确保足够长（至少 2px 高度）、有足够对比度，否则屏幕阅读器用户和低视力用户可能无法识别。