textarea底部空白源于基线对齐，非margin或padding所致；根本解法是设display: block切断行内上下文，或用vertical-align: top/middle避开baseline，禁用height硬编码。
textarea 底部空白是基线对齐导致的，不是 margin 或 padding
你给 .layui-textarea 加了 margin: 0、padding: 0 甚至 border: none，但底部还是多出一段看不见的空隙——这不是样式没生效，而是 <textarea></textarea> 默认作为行内级（inline-level）元素参与布局，会按 vertical-align: baseline 对齐，预留 descender 空间（比如字母 g、y 的下伸部分），视觉上就表现为“底下悬空”。Layui 的 .layui-textarea 只是封装了原生 <textarea></textarea>，没改这个底层行为。
最稳妥解法：强制 display: block
直接切断行内上下文，让 <textarea></textarea> 不再参与基线对齐：
- 在你的 CSS 中加：
textarea.layui-textarea { display: block; } - 如果用了自定义 class（比如
<textarea class="it"></textarea>），就写：.it { display: block; } - 无需额外处理
margin或vertical-align，这一行就够了 - 兼容所有现代浏览器，包括 IE11（需确保没用 flex 布局包裹它）
要保持行内布局？用 vertical-align 替代
仅当你必须把 <textarea></textarea> 和 <input> 水平并排时才考虑此方案，否则优先选 display: block：
- 设
vertical-align: top或middle，避开baseline - 同时建议加
line-height: 1，防止父容器的line-height间接拉高间隙 - 注意：父容器若设置了较大的
line-height（比如2），仍可能透出空隙 - 别用
height: 18px这类硬编码高度——会破坏可访问性、拖拽缩放和响应式
Layui 表单里 textarea 嵌套在 .layui-form-item 中怎么办
常见结构是：<div class="layui-form-item"><textarea class="layui-textarea"></textarea></div>。此时问题常被误判为 .layui-form-item 的 margin-bottom：
- 先确认是不是真有
margin-bottom：用浏览器开发者工具检查，看空隙是否来自.layui-form-item自身 - 如果是，加
.layui-form-item .layui-textarea { display: block; }即可，不用动父容器 - 不要给
.layui-form-item加margin-bottom: 0——这会影响其他表单项，治标不治本 - 确保
<textarea></textarea>是闭合标签：<textarea></textarea>，而非<textarea></textarea>（后者 HTML 非法，某些浏览器解析异常）
<textarea></textarea> 还在行内流里，哪怕你清空所有 margin/padding/border，它底下依然会留白。
