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

title tag html

Question

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

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, los valores de relleno no parecen funcionar como uno esperaría. El ancho del área de texto se incrementa en 350 px 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 al establecer los márgenes en "0px auto", pero me gustaría que el usuario aún pueda desplazarse a través del área de texto si el mouse se encuentra sobre uno de los márgenes vacíos. Por la misma razón, no puedo agregar otro div para que actúe como un envoltorio, ya que el usuario no podría desplazarse a lo largo de las áreas vacías sino solo a lo largo del área de texto sin margen.

¿Alguien puede ayudar?

Answer 1

Algunos navegadores le permiten seleccionar el marcador de posición para cambiar el color, etc., por lo que también puede agregar relleno:

::-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;
}

Answer 2

El modelo de cuadro de CSS define "ancho" como el ancho del contenido, excluyendo el borde, el relleno y el margen.

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

box-sizing: border-box;

Según el enlace anterior, la mayoría de los navegadores modernos (incluido IE> = 8) admiten esta propiedad, pero tienen nombres diferentes en cada navegador.

Answer 3

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

Answer 4

Especificar anchos y márgenes / relleno en ''%'' ayuda. Aquí hay 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%;
}