调大文字需同步调整 line-height 等依赖尺寸。优先用无单位 line-height（如 1.5）保持比例，配合 rem/em 设置 margin/padding，表单元素需重设 padding 和 height，并检查 computed 值继承链。
用 font-size 调文字大小，但别只调它
直接改 font-size 是最常用方式，但它会改变行内盒的高度，进而影响 line-height 的计算基准——很多“间距异常”其实不是字变大了，而是行高没同步调整，导致上下留白失衡。
常见错误现象：font-size 加大后文字挤在一起、段落间空隙变小、按钮内文字贴边、input 框高度塌陷。
- 默认情况下，
line-height是无单位数值（如1.5），它会乘以当前font-size得到实际行高；如果设成固定值（如20px），就容易和新字号不匹配 - 块级元素（如
p、div）的上下 margin 通常不随字号缩放，但视觉上会显得“太近”，需手动微调 - 内联元素（如
span、a）在行内布局中受vertical-align和父容器line-height共同影响，单调font-size易错位
修正间距：优先用相对单位配 line-height
解决“调大字后空隙乱”的核心是让行高与字号保持比例关系，而不是硬编码像素值。
- 把
line-height设为无单位数（如1.4或1.6），它会自动按当前font-size缩放 - 对段落或容器统一设置
font-size和line-height，避免子元素继承混乱（例如body { font-size: 16px; line-height: 1.5; }） - 若需精确控制垂直节奏，可用
rem或em设 margin/padding，比如margin-bottom: 1.5rem，这样能随根字号缩放
按钮、输入框等表单控件文字变大后变形？重设 height 和 padding
表单元素有浏览器默认样式，font-size 变化后，其内部盒模型不会自动适配，尤其 button 和 input[type="text"] 容易出现文字溢出或高度塌陷。
立即学习“前端免费学习笔记（深入）”；
- 不要只靠
font-size，搭配padding调整内边距（如padding: 8px 12px），确保文字有呼吸空间 - 显式设置
height或用min-height配合box-sizing: border-box控制整体高度 - 遇到
select或textarea在某些浏览器中不响应font-size，可加appearance: none并重置样式
调试时重点检查这三处继承链
文字大小和间距异常往往不是单一属性问题，而是多层继承叠加的结果。打开浏览器开发者工具，逐层看以下三点：
- 目标元素的
computed font-size是否符合预期（注意 em/rem 的计算源头） - 其
computed line-height值是否合理（比如font-size: 20px时line-height: 1.4应得28px） - 父容器是否设置了
font-size或line-height，导致子元素继承了意外值（特别是用了em单位时）
真正麻烦的不是调大文字，而是忘了文字变大之后，所有依赖它的尺寸（行高、内边距、容器高度）都该一起动一动。
