Question

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

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

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

http://jsfiddle.net/w47wbq77/

当你运行这个小提琴时，最初你会注意到顶部（textarea内部）的填充被保持。但是，当你有超过150个字符的那一刻，填充消失了。

对此有任何解决方案吗？

Answer 1

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

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

textarea { padding: 0 }

你可能不得不摆弄边界半径等，但那可能会这样做

Answer 2

我认为正确的使用是“保证金”，但对于您的请求可以是： http://jsfiddle.net/Lhderpup/

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

添加新的DIV。更多关于，保证金，填充等： Difference between margin and padding?

我希望我有所帮助。

Answer 3

似乎为textarea元素添加了填充，但是文本仍在填充区域中可见。我还没有真正找到好的解决方案，所以我想出了一种使用边框和轮廓的组合来模仿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;
}

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

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

轮廓是文本区域的实际可见边框，并替换了border属性。

这里是jsFiddle example，以显示其工作原理

在文本区域内维护填充

3 个答案: