应避免对 input 和 textarea 使用 px 单位的 line-height，推荐无单位数值如 1.4；textarea 需配合 resize 或固定 height 才显效果；input 为单行，line-height 影响光标居中；letter-spacing 对中文无效，密码框紧凑应改用 monospace 字体；表单间距由 margin/padding 和布局模式（如 flex gap）决定，非 line-height 或 letter-spacing。
line-height 设置 input 和 textarea 的行高要避开 px 单位
直接给 input 或 textarea 设 line-height，只在部分浏览器（如 Chrome）生效，且用 px 值会破坏缩放一致性。比如设 line-height: 20px，当用户系统字体放大到 125% 时，输入框内容可能被裁切或上下偏移。
- 推荐用无单位数值：
line-height: 1.4;—— 浏览器以当前font-size为基准计算，子元素继承比例而非绝对值 -
textarea必须配合resize: vertical或固定height才能显出效果；input[type="text"]是单行，line-height主要影响光标垂直居中和文字对齐 - 若发现行高“没反应”，检查是否被
padding覆盖：padding加上line-height可能导致总高度远超预期，建议用开发者工具看 computed height
letter-spacing 对中文输入框几乎无效，别乱加
letter-spacing 在 input 或 textarea 上设正值（如 letter-spacing: 2px），英文、数字会撑开，但汉字基本不动；设负值则容易让英文粘连、光标错位，甚至触发 Safari 的渲染 bug。
- 中文输入场景下，
letter-spacing不改变字与字之间的真实排版间距，因为浏览器对中文字形不做字符级间隔调整 - 如果目标是让密码框的 * 号更紧凑，不要用
letter-spacing: -1px，改用font-family: monospace+ 合适的font-size更可靠 - 表单校验提示文字（如
<small class="error">密码长度不足</small>）也不建议加该属性，小字号下负值极易造成文字重叠
真正影响表单视觉间距的是 margin/padding + display 模式
很多人以为调 line-height 或 letter-spacing 就能控制表单元素之间的空隙，其实起决定作用的是布局层的 margin 和容器的 display 类型。
-
input默认是display: inline，margin-top/bottom无效；必须显式设display: block或inline-block才能用margin控制垂直间距 - 用
flex布局时，优先用gap：.form-group { display: flex; flex-direction: column; gap: 8px; }—— 比一堆margin-bottom更干净、无叠加风险 -
padding影响的是框内留白，不是元素间距离；但padding过大会挤压line-height的可视空间，尤其在小尺寸输入框里（如搜索框）
移动端表单要额外处理 line-height 和 zoom 行为
iOS Safari 对 input 的 line-height 有特殊限制：当 font-size 小于 16px 时，会强制放大文本并忽略你设的 line-height，导致文字贴顶或截断。
- 解决方案：确保
input的font-size≥ 16px（哪怕只是视觉上用transform: scale(0.8)缩小） - 避免同时设置
line-height和height，否则在 Android Chrome 中可能引发光标定位偏移 - 测试时务必真机验证——模拟器常不触发 iOS 的自动缩放逻辑
实际排版中，line-height 和 letter-spacing 都不是表单间距的主力，它们只负责“框内”细节；真正决定表单是否整齐、呼吸感是否自然的，是 margin 层级关系和容器布局模式。别在错误的地方调参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
