El ancho del textarea no se alinea con el div que contiene

Question

. Me pregunto por qué el área de texto se niega a mantenerse alineado con el div que lo contiene.

<!-- the textarea pokes out--> 
<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%"></textarea> 
</div> 

Me está causando dificultad para asegurar la alineación de los elementos

Answer 1

De forma predeterminada, un elemento <textarea> se representa con un borde alrededor. El problema con esto es que cuando configura la propiedad width en un elemento, solo está configurando el ancho del contenido, no el ancho total. El ancho total del elemento es (ancho + borde + relleno + margen) por lo que cuando configura width en <textarea> para que sea 100%, establece el ancho del contenido en 300px pero el ancho total es 300px más los bordes predeterminados, lo que hace que exceda el ancho de 300px del <div>.

Usted podría acomodar estas fronteras en el <div> usando relleno/márgenes, pero la mejor solución sería la de establecer la propiedad box-sizing en el <textarea> a border-box para obligar a la propiedad width para definir la anchura total de todo hasta e incluyendo el borde del elemento.

Usted tendrá que hacer un poco de investigación en esa propiedad porque se declaró de manera diferente en todos los navegadores (por ejemplo -moz-box-sizing, -ms-box-sizing, -webkit-box-sizing, etc.). Here is the QuirksMode page on box-sizing para que pueda ver.

El arreglo box-sizing funciona para Firefox, pero no lo he probado en otros navegadores. Es posible que algunos de ellos, especialmente cuando están en modo peculiar/heredado, también puedan aplicar un margen al elemento. Si este es el caso, entonces todo lo que tendría que hacer sería eliminar los márgenes con CSS (AFAIK, no hay una opción ampliamente compatible para box-sizing que se extienda a los márgenes, solo para contenido, relleno y borde).

yo sugeriría ser específico con esta revisión, y sólo la eliminación de los/márgenes derecho e izquierdo (es decir margin-left: 0; margin-right: 0;) en lugar de eliminar por completo los márgenes (es decir margin: 0;) para conservar los márgenes superior/inferior si es que existen (y si quieres para mantenerlos). Sé que Firefox aplica un margen de 1px a la parte superior/inferior, y también otros navegadores podrían hacerlo.

Answer 2

He intentado que en Firefox, Chrome e IE, y todos ellos muestran correctamente. Sospecho que tu DIV está dentro de otro contenedor y eso está causando el problema.

Por favor, agregue una parte de su código.

Answer 3

El área de texto puede tener un margen que se le aplica. Prueba esto:

<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%; margin: 0;"></textarea> 
</div> 

Answer 4

<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%"></textarea> 
</div> 

funcionamiento probado en Firefox 3.6.10, Internet Explorer 8 y Google Chrome.

Pero, tal vez en lugar de encerrarlo en un DIV, también puede probar esto:

<textarea style="border:1px solid #ccc; width:300px"></textarea> 

Qué tiene aproximadamente el mismo aspecto como su código original.