只有给 或 设置 padding 才有效，作用于 或 的 padding 会被浏览器忽略； 的间距由其所在单元格的 padding 决定，而非自身 margin 或 display 设置。

给 或 加 padding 才有效

直接给

或 写 padding 没用，浏览器会忽略。真正起作用的只有作用在 ✅ 文本域上下留 10px、左右留 16px

✅ 紧贴边框，适合紧凑布局

如果 textarea 自身还设了 margin，会叠加在 padding 外侧，容易撑破单元格，慎用

border-spacing 控制的是单元格之间，不是文本域之间

有人误以为调大 border-spacing 能让 在不同单元格里显得“更分开”，但这是两回事：border-spacing 只影响相邻

和	上的 padding 值。 常见错误是把文本域（）单独当对象调间距——其实它只是单元格里的一个子元素，真正决定它离边框多远的，是它所在的	的 padding。			边框外侧的透明间隙，对单元格内部的文本域毫无影响。 而且它只在 border-collapse: separate 下生效；若表格用了 collapse（比如 Bootstrap 默认），border-spacing 直接被无视。 想让两列的 textarea 看起来更远？改 table { border-collapse: separate; border-spacing: 12px 0; } 想让同一单元格里 textarea 和上面的 不挤在一起？清掉 h3 默认 margin-bottom，或用 td > * { margin: 0; } 别给 设 display: block 后再加 margin 试图“推远”——它不会改变单元格间距离，反而可能破坏垂直对齐 响应式下 padding 值容易失效的几个点 固定像素的 padding: 12px 在小屏上常导致文字换行、内容溢出或列宽崩塌，尤其当 textarea 宽度设为 100% 时，左右 padding 会压缩可用宽度。 使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审 使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。 下载 移动端优先：用 padding: 0.5em 1em，em 会随字体缩放，更鲁棒 避免 padding 和 border + box-sizing: border-box 组合时计算错位——确认 td 没被全局重置成 box-sizing: content-box 如果用了 colspan，跨列单元格的 padding 仍只作用于自身，但视觉上可能显得“空旷”，需手动微调左右值平衡 文本域本身需要额外控制的间距场景 当 放在	里，你还可能遇到光标离顶边太近、行高不一致、或 placeholder 对不齐等问题——这些和表格无关，是 textarea 自身渲染特性。 统一行高：加 line-height: 1.5; 到 textarea，别依赖默认值 placeholder 垂直居中难？用 padding-top: calc(0.5em + 2px); 微调，而非硬塞 height 多行 textarea 高度不稳？设 min-height 和 resize: vertical，避免拉伸后 padding 被挤压 千万别用 vertical-align: middle 试图“居中”整个 textarea——它只对 inline 元素有效，在 td 里默认是 baseline 对齐，该用 align-items: center 配合 display: flex 的 td 才靠谱 实际最常漏掉的一点： 的换行符（\n）在渲染时会生成空行，看起来像多了一行间距，但这不是 CSS 问题，而是内容本身带的回车——提交前 trim 或用 JS 清理才是根治办法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！