textarea 是 display: inline-block 的替换元素，其 vertical-align 默认 baseline 导致对齐错位，box-sizing 默认 content-box 易致超宽，应设 border-box；rows 比 height 更可靠控制行数，resize 需显式控制以防尺寸失控。
textarea 是替换元素，但不是“标准”行内元素
它默认 display: inline-block，不是 inline，所以 padding/border/width/height 都生效——但这恰恰是混乱的起点。很多开发者误以为它像 span 一样受行高约束，结果发现垂直对齐错位、高度计算不一致、换行后底部留白异常。
根本原因在于：浏览器把 textarea 当作一个“可编辑的替换元素”，其内部行框逻辑和渲染行为与 img 或 input[type="text"] 不同，尤其在 vertical-align 和 line-height 交互上更敏感。
vertical-align: baseline 导致底部留白最常见
当 textarea 和文字、label 或其他行内元素并排时，它默认按基线（baseline）对齐，而它的 baseline 落在**滚动条或边框底边附近**，不是内容底部。这就造成视觉上“悬空”或“下沉”，尤其加了 border 或 padding 后更明显。
- 不要依赖默认
vertical-align，显式设为vertical-align: top或middle - 若需与文字严格平齐，建议统一父容器用
display: flex; align-items: center，绕过 baseline 计算 -
line-height对textarea内容行高有效，但对整体盒模型无影响——别试图靠调line-height控制它的高度
box-sizing 默认是 content-box，宽高易失控
多数 UI 框架或重置样式没覆盖 textarea，导致 width: 100% + padding: 12px + border: 1px → 实际超宽，触发横向滚动或换行错位。
- 必须单独声明：
textarea { box-sizing: border-box; }（全局重置* { box-sizing: border-box }通常已覆盖，但旧项目或第三方组件里常漏） - 避免写
height: 100px; padding: 10px;后再期望“内容区高 80px”——在content-box下，内容区真就是 80px；但在border-box下，内容区会压缩，可能影响光标定位和文字行数 - 控制行数更可靠的方式是用
rows属性，而非硬设height；若必须用 height，请搭配resize: none防止用户拖拽破坏布局
换行与 resize 行为干扰盒模型尺寸稳定性
textarea 的 resize 默认开启，用户拖拽后 DOM 尺寸变更，但 CSS 中写的 width/height 不再生效；同时，内容换行（软换行）不会改变元素盒尺寸，但长文本溢出可能触发滚动条，悄悄增加右侧 padding 占位（滚动条宽度因系统而异，约 12–17px）。
- 生产环境建议关闭：
resize: vertical或resize: none，避免不可控尺寸变化 - 若需响应式宽度，用
min-width/max-width替代固定width，并配合width: 100% - 滚动条干扰问题：可用
overflow: scroll强制显示滚动条，或用scrollbar-width: none（Firefox）+::-webkit-scrollbar { display: none }（WebKit）隐藏，但注意这会影响可访问性
真正难处理的，是它既不像纯替换元素（如 img）那样完全脱离行框逻辑，又不能像块级元素那样自由控制外边距和对齐方式——调试时得同时盯住 computed display、vertical-align、box-sizing 和滚动条状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
