¿Cómo puedo agregar relleno a un área de texto sin aumentar el ancho?

Question

He estado teniendo problemas para configurar el ancho de un elemento de área de texto y usar relleno a través de CSS. El valor de relleno parece cambiar el ancho del área de texto, lo que preferiría que no fuera.

Este es mi código HTML:

<div id="body"> 
    <textarea id="editor"></textarea> 
</div> 

Y mi código CSS:

#body { 
    height:100%; 
    width:100%; 
    display:block; 
} 

#editor { 
    height:100%; 
    width:100%; 
    display:block; 
    padding-left:350px; 
    padding-right:350px; 
} 

Sin embargo, no aparecen los valores de relleno para trabajar como uno esperaría. El ancho del área de texto se incrementa 350px en ambas direcciones, en lugar de definir el espacio entre los bordes del elemento y su contenido.

He considerado simplemente centrar el área de texto estableciendo los márgenes en "0px auto", pero me gustaría que el usuario todavía pueda desplazarse por el área de texto si el mouse se mueve sobre uno de los márgenes vacíos. Por la misma razón, no puedo agregar otro div para que actúe como un contenedor, ya que el usuario no podría desplazarse por las áreas vacías, sino solo a lo largo del área de texto sin márgenes.

¿Alguien puede ayudar?

Answer 1

El CSS box model define "ancho" como el ancho del contenido, excluyendo borde, relleno y margen.

Afortunadamente, CSS3 tiene un nuevo box-sizing propiedad que le permite modificar este comportamiento para incluir en lugar de relleno, etc., en el ancho especificado usando:

box-sizing: border-box; 

De acuerdo con el enlace de arriba, la mayoría de los navegadores modernos (incluyendo IE> = 8) admiten esta propiedad, pero tienen diferentes nombres en cada navegador.

Answer 2

El ancho especificado por CSS no incluye relleno o borde (de acuerdo con las especificaciones W3C). Supongo que una forma de hacerlo es con un JavaScript que establece el ancho de #editor en el ancho de #body menos 700px, pero eso es un poco complicado ... No estoy seguro si hay una forma CSS de hacer lo que quieras aquí. Por supuesto, puede usar margin luego registrar el evento onMouseWheel en #body y trabajar con eso ...

Answer 3

Especificar anchos y márgenes/relleno en '%' ayuda. Aquí es un ejemplo -

Live @http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body { 
    background-color:#ccc; 
    height:100%; 
    width:100%; 
    display:block; 
} 

textarea#editor { 
    border:none; 
    width:80%; 
    height:100%; 
    margin-left:10%; 
    margin-right:10%; 
} 

Answer 4

Algunos navegadores le permiten orientar el marcador de posición para cambiar el color, etc., por lo que puede agregar relleno así:

::-webkit-input-placeholder { /* WebKit browsers */ 
    padding: 5px 0 0 5px; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    padding: 5px 0 0 5px; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    padding: 5px 0 0 5px; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    padding: 5px 0 0 5px; 
}