Maintaining A Padding Inside Of Text-area

Inside of my textarea, I wish to maintain a padding of 30px from the top. textarea { display: block; width: 300px; height: 50px; padding-top: 30px; } However, once

Solution 1:

I would remove all styling from the text area, and wrap it in a div that looks like a text area

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

textarea { padding: 0 }

You might have to fiddle about with border radius etc, but that would maybe do it

Solution 2:

It looks like for the textarea element the padding is added, but the text is still visible in the padding zone. I haven't really found a good solution so I came up with a workaround using a combination of border and outline to mimic the padding inside the 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;
}

The top and bottom transparent borders are the actual padding. They add extra space between between the text and the textarea.

The left and right transparent borders prevent border artifacts left due to how the borders are calculated and drawn in the browsers.

The outline is the actual visible border of the textarea and replaces the border property.

Here's a jsFiddle example to show how it works

Solution 3:

I think the correct it's usage a "margin", but for you request can be: http://jsfiddle.net/Lhderpup/

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

Adding a new DIV. More about, Margin, Padding, etc: Difference between margin and padding?

I hope I have helped.