Como criar uma largura de 100% da TextArea sem estourar quando o preenchimento está presente no CSS?

Question

Nov 07, 2008, 03:35 AM

Como criar uma largura de 100% da TextArea sem estourar quando o preenchimento está presente no CSS?

Eu tenho o seguinte trecho CSS e HTML sendo renderizado.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

O problema é que a área de texto acaba sendo 8px mais larga (2px para borda + 6px para preenchimento) do que o pai. Existe uma maneira de continuar usando bordas e preenchimentos, mas restringir o tamanho total dotextarea para a largura dos pais?