textarea底部空白源于基线对齐,非margin或padding所致;根本解法是设display: block切断行内上下文,或用vertical-align: top/middle避开baseline,禁用height硬编码。

textarea 底部空白是基线对齐导致的,不是 margin 或 padding
你给 .layui-textarea 加了 margin: 0、padding: 0 甚至 border: none,但底部还是多出一段看不见的空隙——这不是样式没生效,而是 <textarea> 默认作为行内级(inline-level)元素参与布局,会按 vertical-align: baseline 对齐,预留 descender 空间(比如字母 g、y 的下伸部分),视觉上就表现为“底下悬空”。Layui 的 .layui-textarea 只是封装了原生 <textarea>,没改这个底层行为。
最稳妥解法:强制 display: block
直接切断行内上下文,让 <textarea> 不再参与基线对齐:
- 在你的 CSS 中加:
textarea.layui-textarea { display: block; } - 如果用了自定义 class(比如
<textarea class="it">),就写:.it { display: block; } - 无需额外处理
margin或vertical-align,这一行就够了 - 兼容所有现代浏览器,包括 IE11(需确保没用 flex 布局包裹它)
要保持行内布局?用 vertical-align 替代
仅当你必须把 <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/>(后者 HTML 非法,某些浏览器解析异常)
<textarea> 还在行内流里,哪怕你清空所有 margin/padding/border,它底下依然会留白。


















