HTML 中 默认以 inline 级别参与行内布局，其底部会因基线对齐（baseline alignment）产生不可见的空白间隙；解决核心是将其显示模式改为 block 或调整垂直对齐方式，而非仅依赖 margin: 0。

html 中 `` 默认以 `inline` 级别参与行内布局，其底部会因基线对齐（baseline alignment）产生不可见的空白间隙；解决核心是将其显示模式改为 `block` 或调整垂直对齐方式，而非仅依赖 `margin: 0`。

在实际开发中， 后出现意外空白（尤其在 Chrome/Firefox 中表现不一致）是一个高频但易被误解的问题。该现象<strong>并非由 margin、padding 或 border 引起</strong>，而是源于浏览器默认将 <textarea> 视为 <strong>inline 元素</strong>，并按文本基线（baseline）与其他行内元素（如 <input>）对齐——而 <textarea> 的基线位于其底边上方约 4px 处，导致其下方预留出空隙（类似 <img> 默认对齐行为）。

✅ 推荐解决方案（首选且语义清晰）：
将 显式设为块级元素，彻底脱离行内布局上下文：

.it {
  min-width: 100%;
  border: none;
  background-color: lightblue;
  outline: none;
  /* 关键修复：强制 block 显示，消除基线对齐影响 */
  display: block;
}

.it:focus {
  border: none;
  outline: none;
}

✅ 备选方案（保留 inline 场景）：
若必须维持行内布局（如与 水平并排），可改用 vertical-align 控制对齐基准：

.it {
  /* ...其他样式 */
  vertical-align: top; /* 或 middle / bottom */
}

⚠️ 注意事项：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• height: 18px（如原答案所提）属临时规避，会破坏 的可扩展性与无障碍体验（用户无法拖拽调整高度），<strong>不推荐作为通用解法</strong>；
• margin: 0 和 padding: 0 对此问题无效，因空白源自布局模型，非盒模型间距；
• 确保 HTML 结构中 标签闭合正确（<textarea>，而非自闭合 ，后者不符合 HTML 标准且可能触发解析异常）。

总结：根本解法是理解并干预 的默认显示行为——通过 display: block 切断行内上下文，或通过 vertical-align 精确控制对齐位置。这既符合标准、兼容所有现代浏览器，也兼顾可访问性与维护性。

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