在文本区域内保持填充答案

【问题标题】：Maintaining a padding inside of text-area在文本区域内保持填充
【发布时间】：2017-03-06 17:30:12
【问题描述】：

在我的文本区域内，我希望从顶部保持 30 像素的填充。

textarea {
    display: block;
    width: 300px;
    height: 50px;
    padding-top: 30px;
}

但是，一旦文本区域被文本填充并且内容开始滚动。填充不再保留。

http://jsfiddle.net/w47wbq77/

当您运行此小提琴时，最初您会注意到顶部（文本区域内部）的填充保持不变。但是，当您有超过 150 个字符时，填充就消失了。

有什么解决办法吗？

【问题讨论】：

内边距仍然存在，只是因为文本长度而被滚动出视图。你想让 30 像素高的白色块始终可见吗？

标签： html css

【解决方案1】：

我会从文本区域中删除所有样式，并将其包装在一个看起来像文本区域的 div 中

.wrapper { 
  border: 1px solid #aaa; 
  padding-top: 30px; 
}

textarea { padding: 0 }

您可能不得不摆弄边界半径等，但这也许可以做到

【讨论】：

【解决方案2】：

看起来为 textarea 元素添加了填充，但文本在填充区域中仍然可见。我还没有真正找到一个好的解决方案，所以我想出了一个解决方法，使用边框和轮廓的组合来模拟文本区域内的填充：

textarea {
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
    outline: 1px solid #dadcde;
}

顶部和底部透明边框是实际的填充。它们在文本和文本区域之间添加了额外的空间。

左右透明边框可防止由于在浏览器中计算和绘制边框的方式而留下的边框伪影。

outline 是 textarea 的实际可见边框，替换了border 属性。

这里有一个jsFiddle example 来展示它是如何工作的

【讨论】：

【解决方案3】：

我认为正确的用法是“边距”，但您的要求可以是： http://jsfiddle.net/Lhderpup/

.padTextarea {
  background-color: white;
  padding-top: 30px;
  display: table;
  border: 1px solid #CCC;
}

添加一个新的 DIV。更多关于边距、填充等： Difference between margin and padding?

我希望我有所帮助。

【讨论】：