修复了 contenteditable 元素中的填充答案

【问题标题】：Fixed padding in contenteditable element修复了 contenteditable 元素中的填充
【发布时间】：2014-12-20 04:04:37
【问题描述】：

textarea 的填充始终是固定的。当 textarea 的文本内容滚动时，填充保持在边缘附近。

contenteditable 元素的填充行为不同。当元素的文本内容滚动时，内边距随之移动。

This demo 说明了差异。

contenteditable 元素能否通过样式设置使其填充行为更像textarea 填充，在滚动文本内容时保持原位？

【问题讨论】：

好问题。我也很好奇是否有任何潜在的解决方案可以或应该区分 contenteditable 元素和任何其他常规块元素，因为基本上 contenteditable 元素的行为与任何其他块元素一样。
和 :after 也会滚动... :) 你为什么不使用 textarea ？ :) 在某些时候，模拟专用的表单元素真的很麻烦 :)
乍一看确实很奇怪。不同之处在于文本不能在textarea 中垂直居中，但可以使用display:flex 在contenteditable 元素中垂直居中。见this demo。我需要将文本垂直居中，所以 textarea 不行。

【解决方案1】：

对于非 textarea“contenteditable”块级元素的填充是否可以像 textarea 一样表现的具体问题的答案是“否”。

可能有一种方法可以通过向 div 添加其他元素来实现这种外观，但 div 的填充将始终按照填充的设计方式运行。

您的填充问题与“contenteditable”属性无关。您可以从您的 div 中删除“cnotenteditable=true”，并且填充的行为方式相同。填充元素“清除内容周围的区域”，在本例中是 div 中的文本。填充将始终保留在文本周围，而不是 div 内部。

【讨论】：

【解决方案2】：

2019年的回复。设置：

border: 10px solid black;
background: black;
color: white;

【讨论】：

【解决方案3】：

<style type="text/css">
            contenteditable] {
                outline: 0px solid transparent;
            }
</style>

<body>
  <div style="padding:20px">
    <div contenteditable="true"></div>
   </div>
</body>

【讨论】：