textarea 的 rows 和 cols 仅提供初始尺寸提示，实际高度受 font-size、line-height、padding 和 box-sizing 共同影响；锁定视觉行数须用 min-height: calc(line-height × 行数) 配合 box-sizing: border-box 与合理 padding。
textarea 的 rows 和 cols 不等于行高，别硬凑
直接写 rows="5 并不能保证文本域显示 5 行固定高度，它只是告诉浏览器“按默认等宽字体、当前字号、标准行高，大概能塞下 5 行文本”。实际渲染受 font-family、font-size、line-height、padding 共同影响，而且只作用于初始尺寸——内容删空后区域会塌缩，输入超长后又自动滚动。
常见错误是只设 rows 就以为布局稳了，结果在不同设备或字体设置下高度忽大忽小。真正要锁定视觉行数，得靠 CSS 配合：
- 用
min-height: calc(1.5em * 5)（把1.5em换成你实际的line-height值）替代单纯依赖rows - 加
box-sizing: border-box，避免padding再额外撑高 - 禁用用户缩放：加
resize: none，防止拖拽破坏预设尺寸
line-height 在 textarea 里照样生效，但要注意继承逻辑
line-height 对 <textarea></textarea> 有效，但它控制的是内部文本行的垂直间距，不是整个控件的高度。如果你设了 font-size: 14px 和 line-height: 1.6，那单行文本占用高度就是 14px × 1.6 = 22.4px，5 行就是约 112px（不含 padding 和 border）。
关键点在于：line-height 是无单位数值时才可继承并随字体缩放；若写成 line-height: 20px，子元素继承后就锁死在 20px，哪怕字体变大也会导致文字重叠。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用无单位值，比如
line-height: 1.6 - 不要在父容器上设固定
line-height后再嵌套textarea，容易干扰其内部排版 - 多行居中不能靠
line-height实现——那是单行技巧，textarea必须用padding或 Flex 布局模拟垂直居中
padding 要算进总高度，别漏掉 box-sizing
padding 是 textarea 内容与边框之间的空白，它会增加元素整体高度。比如你设了 height: 100px + padding: 10px，内容区只剩 80px 高——这常导致“明明设了 5 行却只能看清 3 行”的问题。
更隐蔽的坑是默认 box-sizing: content-box，意味着 width/height 只管内容区，padding 和 border 都额外加进去。所以实际占位比预期大一圈。
- 务必加
box-sizing: border-box，让 width/height 包含 padding 和 border - 上下
padding建议用 em 或 rem，比如padding-top: 0.5em，随字体大小自适应 - 左右
padding可用固定值（如12px），避免中文输入法候选框被遮挡
动态适配内容高度时，padding 和 line-height 必须参与计算
如果用 JS 监听输入并自动拉伸 textarea，光靠 scrollHeight 不够准——它包含 padding 和 border，而你通常只想撑开内容区。真实行高 = parseInt(getComputedStyle(el).lineHeight)，每行内容高度还得减去上下 padding。
例如：字体 14px、line-height: 1.6、padding: 8px 12px，则单行净高 = 14 × 1.6 − 8 × 2 = 6.4px，这显然不合理，说明 padding 设置过大或 line-height 过小。
- JS 动态调整前，先用
getComputedStyle读取lineHeight、paddingTop、paddingBottom - 计算公式应为：
targetHeight = (行数 × 行高) + paddingTop + paddingBottom - 避免每次输入都重排版：用
textarea.style.height = 'auto'触发重算，再赋值目标高度
实际开发中最容易被忽略的是：把 rows 当成样式属性来用，而它本质是 HTML 属性，仅提供初始提示；所有精确控制必须落到 CSS 的 line-height、padding 和 box-sizing 上，三者缺一不可。
