如何将填充保留在 contenteditable div 中，就像保留在 textarea 中一样？答案

【问题标题】：How do I keep the padding in a contenteditable div the same way it is kept in a textarea?如何将填充保留在 contenteditable div 中，就像保留在 textarea 中一样？
【发布时间】：2020-08-01 13:43:43
【问题描述】：

当我在textarea 中设置padding 和overflow:scroll 时，即使显示滚动条，它也会保留padding。 contenteditable div 不会发生同样的情况，如下例所示，其中 div 和 textarea 应用了相同的样式：

https://jsfiddle.net/xa7b4f8y/

.contentEditable, .textArea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  width: 300px;
  height: 50px;
  border: solid 1px black;
  overflow: scroll;
  padding: 20px;
  margin-bottom: 20px;
}

<h3>contenteditable:</h3>
<div class="contentEditable" contenteditable spellcheck="false"></div>
<h3>textarea:</h3>
<textarea class="textArea" contenteditable spellcheck="false"></textarea>

如您所见，在 contenteditable div 中，只保留了 padding-left，而在 textarea 中，它在所有四个边上都保留了 20px 的填充。

如何让 contenteditable 中的填充与在 textarea 中的行为方式相同？

我在 Firefox 78 上运行它。在 Chrome 84 上，两者的工作方式相同 - 只保留左右填充，这也不是预期的结果。

【问题讨论】：

什么浏览器？对我来说，使用 chrome 时的行为相同
我使用的是 Firefox 78。我将更新问题，添加该信息。

标签： html css textarea padding contenteditable

【解决方案1】：

可能不是最好的解决方案，但您可以使用伪元素破解它，您可以在白色背景的填充区域上粘贴。

.contentEditable,
.textArea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  width: 300px;
  height: 50px;
  border: solid 1px black;
  overflow: scroll;
  padding:20px;
  margin-bottom: 20px;
}
.contentEditable::before,
.contentEditable::after {
  content:"";
  display:block;
  height:20px;
  position:sticky;
  background:#fff;
} 
.contentEditable::before {
  margin-top:-19px;
  top:-19px;
}
.contentEditable::after {
  margin-bottom:-20px;
  bottom:-20px;
}

<h3>contenteditable:</h3>
<div class="contentEditable" contenteditable spellcheck="false"></div>
<h3>textarea:</h3>
<textarea class="textArea" contenteditable spellcheck="false"></textarea>

【讨论】：