升级Angular Material MDC后表单错误提示样式修改疑问

为什么默认使用 display: inline-block #

• 精准垂直对齐：inline-block 支持通过 vertical-align 属性精细控制元素垂直位置，这是 MDC 表单字段布局的核心需求——确保输入区域、错误提示等元素在各种状态（聚焦、错误、正常）下都能保持统一的垂直对齐效果。
• 稳定高度占位：inline-block 会严格应用设置的 height: 16px，为辅助文本区域固定垂直空间，避免因浏览器默认样式差异、文本内容变化导致的布局偏移，维持表单字段整体高度的一致性。
• 布局体系兼容：MDC 组件库采用模块化布局设计，inline-block 能更好地与周围内联/块级元素配合，契合表单字段的网格、内边距等整体布局规则。

修改为 display: inline 可能引发的问题 #

• 垂直对齐错位：inline 元素的垂直对齐依赖文本基线，无法像 inline-block 那样灵活调整，在不同浏览器、屏幕尺寸或表单状态下，输入文本与错误提示可能出现垂直方向的错位。
• 高度占位失效：inline 元素不支持自定义高度，设置的 height: 16px 会被忽略，当错误提示文本换行或内容长度变化时，表单字段的高度会随之跳动，破坏页面布局的稳定性。
• 潜在样式冲突：MDC 组件的其他关联样式是基于 inline-block 的布局前提设计的，修改后可能与表单字段的边框、前缀/后缀元素等样式产生冲突，导致复合表单场景（如带图标的输入框）出现显示异常。

内容的提问来源于stack exchange，提问作者Haradzieniec