固定高度textarea：消除上下多余内边距与自动换行问题求助

核心问题：HTML标签错误 #

你错误使用了<input type="textArea">——HTML中不存在这个输入类型，多行文本输入必须用独立的<textarea>标签，这是导致样式异常的根源。

具体修复步骤： #

1. 替换HTML标签
   把错误的<input>标签换成<textarea>，它是专门用于多行输入的元素，自带基础换行支持。

2. 消除上下多余内边距

   • 给textarea添加margin: 0，清除浏览器默认的外边距
   • 保留box-sizing: border-box，确保设置的padding和border不会撑开元素高度
   • 把border: 0.1px改成1px，0.1px在部分浏览器中会被识别为0，导致边框显示异常

3. 实现自动换行&合理处理滚动

   • 保留white-space: pre-wrap和overflow-wrap: break-word，确保长文本自动换行、长单词能拆分
   • 把overflow: hidden改成overflow-y: auto，内容超出固定高度时显示纵向滚动条，避免内容被隐藏

修改后的完整代码 #

CSS

.input--custom {
  border: 1px solid #cfd7fd;
  padding: 5px;
  display: block;
  height: 100px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.input--width {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-y: auto;
}

HTML

<div>
  <textarea placeholder="Type your message here and click submit" class="input--custom input--width"></textarea>
</div>

内容的提问来源于stack exchange，提问作者Newbie_developer