Search code examples
htmlcssweb-applications

HTML textarea margin

When I add a margin to an HTML <textarea> that has 100% width, the margin is properly applied to the left side, but the entire textbox is shifted to the right and extends of the parent container.

See this JSFiddle as an example:

<textarea style="width: 100%; height: 100%; margin: 10px;">tyjyjyj</textarea>

As you can see, the textarea extends past the right side instead of expanding to the 10 pixels margin. Is there a way to fix this?

The only way I can think of is by manually adjusting the size with JavaScript, but there must be another way.

Solution

  • This may be the effect you're after. Here I am setting the position to absolute and giving the margin from each edge.

    HTML

    <textarea>tyjyjyj</textarea>

    CSS

    textarea {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
}

    In effect: http://jsfiddle.net/tTnCd/3/

    And to better position the textarea you can wrap it with relative styled elements like so http://jsfiddle.net/tTnCd/4/