只有给 或 设置 padding 才有效，作用于 或 的 padding 会被浏览器忽略； 的间距由其所在单元格的 padding 决定，而非自身 margin 或 display 设置。
给 <td> 或 <code><th> 加 <code>padding 才有效
直接给 <table> 或 <code><tr> 写 <code>padding 没用，浏览器会忽略。真正起作用的只有作用在 <td> 和 <code><th> 上的 <code>padding 值。
常见错误是把文本域（<textarea></textarea>）单独当对象调间距——其实它只是单元格里的一个子元素，真正决定它离边框多远的，是它所在的 <td> 的 <code>padding。
-
<td style="padding: 10px 16px;"><textarea></textarea></td>✅ 文本域上下留 10px、左右留 16px -
<td style="padding: 0;"><textarea></textarea></td>✅ 紧贴边框，适合紧凑布局 - 如果
textarea自身还设了margin，会叠加在padding外侧，容易撑破单元格，慎用
border-spacing 控制的是单元格之间，不是文本域之间
有人误以为调大 border-spacing 能让 <textarea></textarea> 在不同单元格里显得“更分开”，但这是两回事：border-spacing 只影响相邻 <td> 边框外侧的透明间隙，对单元格内部的文本域毫无影响。<p>而且它只在 <code>border-collapse: separate 下生效；若表格用了 collapse（比如 Bootstrap 默认），border-spacing 直接被无视。
立即学习“前端免费学习笔记（深入）”；
- 想让两列的
textarea看起来更远？改table { border-collapse: separate; border-spacing: 12px 0; } - 想让同一单元格里
textarea和上面的<h3></h3>不挤在一起？清掉h3默认margin-bottom，或用td > * { margin: 0; } - 别给
<textarea></textarea>设display: block后再加margin试图“推远”——它不会改变单元格间距离，反而可能破坏垂直对齐
响应式下 padding 值容易失效的几个点
固定像素的 padding: 12px 在小屏上常导致文字换行、内容溢出或列宽崩塌，尤其当 textarea 宽度设为 100% 时，左右 padding 会压缩可用宽度。
- 移动端优先：用
padding: 0.5em 1em，em会随字体缩放，更鲁棒 - 避免
padding和border+box-sizing: border-box组合时计算错位——确认td没被全局重置成box-sizing: content-box - 如果用了
colspan，跨列单元格的padding仍只作用于自身，但视觉上可能显得“空旷”，需手动微调左右值平衡
文本域本身需要额外控制的间距场景
当 <textarea></textarea> 放在 <td> 里，你还可能遇到光标离顶边太近、行高不一致、或 placeholder 对不齐等问题——这些和表格无关，是 <code>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才靠谱
实际最常漏掉的一点：<textarea></textarea> 的换行符（\n）在渲染时会生成空行，看起来像多了一行间距，但这不是 CSS 问题，而是内容本身带的回车——提交前 trim 或用 JS 清理才是根治办法。
