按钮文字排版异常源于其替换元素特性，需兼顾字体度量、基线对齐、继承链与布局上下文；显式设置height/line-height、重置focus样式、规范flex结构、慎用writing-mode并配合逻辑属性，方能精准控制。
按钮文字排版不听使唤，根本不是“写得不对”，而是没理清 button 的默认行为和 CSS 作用域——它既不是纯文本容器，也不是普通块元素，很多样式（比如 line-height、vertical-align、letter-spacing）在它身上表现特殊。
button 文字上下不居中？别只调 line-height
单行按钮里文字偏上或压底，常见于 Chrome/Firefox 不一致。这不是 bug，是浏览器对 button 内部盒模型解析不同：有的加了隐式 padding，有的对 line-height: normal 的计算依赖字体度量。
- 最稳方案：显式设
height+ 同值line-height，例如height: 36px; line-height: 36px; - 必须重置 Firefox 的 focus 边框干扰：
button::-moz-focus-inner { border: 0; padding: 0; } - 如果按钮含图标或用了自定义字体，
line-height得同步微调，否则会漂移 - 别对
input[type="button"]直接套display: flex，老版本 Safari/IE 不支持；统一用语义化button标签
按钮里图标在上、文字在下？Flex 是首选，但顺序不能错
用 display: flex 实现上下结构，关键不在“能不能”，而在 HTML 子元素顺序和 CSS 对齐逻辑是否匹配。
- HTML 中图标必须是独立子元素（
<svg></svg>或<i></i>），且写在文字前面：<button><svg></svg>上传</button> - CSS 设
flex-direction: column; align-items: center;，不要依赖text-align: center - 用
gap: 4px控制图文字间距，比手动margin-bottom更可靠，响应式可用gap: clamp(2px, 0.25em, 6px) - 内联
<svg></svg>默认是 inline 元素，容易因line-height下沉，加一句svg { display: block; margin: 0 auto; }就稳了
button 里文字要竖排？writing-mode 不是加了就行
writing-mode: vertical-rl 在 button 上无效，99% 是因为没突破它的显示模式限制——button 默认是 inline-block，而这个属性对内联级容器不生效。
- 必须显式设
display: inline-flex（比block更稳妥，避免换行破坏按钮尺寸） - 必须设
width，否则竖排文字会无限向下延伸；建议用min-width配合white-space: nowrap防截断 - 必加
text-orientation: mixed，否则英文缩写（如 PDF、API）会侧躺不可读 -
padding和line-height在竖排下方向翻转：原来padding-top变成右内边距，改用逻辑属性padding-block和padding-inline
多个按钮排不齐？先砍掉所有继承污染
按钮并排时高低不一、间距不均，八成是 letter-spacing、font-size 或 vertical-align 从父级漏进来，或者混用了 input 和 button。
- 统一重置：
button, input { all: unset; box-sizing: border-box; vertical-align: top; } - Flex 布局下别指望
gap管首尾间距——它只管项目之间；首尾贴边要靠父容器的padding: 0 - HTML 换行符会在 Flex 容器里生成空白 text node，破坏对齐；要么把标签写成一行，要么用
display: contents（注意兼容性） - 响应式等宽按钮别设
width: 25%，用flex: 1; min-width: 80px;更抗文字长度变化
真正难的从来不是某条 CSS 规则，而是 button 作为替换元素，它的渲染逻辑游走在文本流和盒模型之间——你得同时管住字体度量、基线对齐、继承链和布局上下文，少一个环节，文字就偏一点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
