¿Cómo hacer un ancho de elemento: 100% menos relleno?

Tengo una entrada html.

La entrada tiene padding: 5px 10px;Quiero que sea el 100% del ancho del div principal (que es fluido).

Sin embargo, el uso width: 100%;hace que la entrada sea 100% + 20px¿cómo puedo evitar esto?

Ejemplo

box-sizing: border-box es una forma rápida y fácil de solucionarlo:

Esto funcionará en todos los navegadores modernos e IE8 +.

Aquí hay una demostración: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Las versiones prefijadas del navegador ( -webkit-box-sizing, etc.) no son necesarias en los navegadores modernos.

Es por eso que tenemos box-sizingen CSS.

He editado su ejemplo, y ahora funciona en Safari, Chrome, Firefox y Opera. Compruébalo: http://jsfiddle.net/mathias/Bupr3/ Todo lo que agregué fue esto:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Lamentablemente, los navegadores antiguos como IE7 no son compatibles con esto. Si está buscando una solución que funcione en viejos IE, consulte las otras respuestas.

Utilice también el relleno en porcentajes y elimine del ancho:

acolchado: 5%;
ancho: 90%;

Puede hacerlo sin usar box-sizingy no soluciones claras como width~=99%.

Demo en jsFiddle :

• Mantener entradas paddingyborder
• Agregar a la entrada negativa horizontal margin= border-width+horizontal padding
• Agregar al contenedor horizontal de entrada paddingigual al margindel paso anterior

Marcado HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Use css calc ()

Súper simple e impresionante.

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

Como se ve aquí: ancho de división 100% menos cantidad fija de píxeles
Por webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Fuente original: http://web-profile.com.ua/css/dev/css -width-100prc-minus-100px /

Acabo de copiar esto aquí, porque casi lo perdí en el otro hilo.

Suponiendo que estoy en un contenedor con relleno de 15px, esto es lo que siempre uso para la parte interna:

width:auto;
right:15px;
left:15px;

Eso estirará la parte interna a cualquier ancho que sea menor a 15px a cada lado.

Puedes probar algunos trucos de posicionamiento. Puede poner la entrada en un div con position: relativey una altura fija, luego en la entrada have position: absolute; left: 0; right: 0;y cualquier relleno que desee.

Ejemplo en vivo

Aquí está la recomendación de codeontrack.com , que tiene buenos ejemplos de solución:

En lugar de establecer el ancho del div en 100%, configúrelo en automático y asegúrese de que <div>esté configurado para mostrar: bloque (predeterminado para <div>).

Mueva el relleno del cuadro de entrada a un elemento contenedor.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Ver ejemplo aquí: http://jsfiddle.net/L7wYD/1/

Solo entienda la diferencia entre ancho: auto; y ancho: 100%; Ancho: auto; calculará (AUTOMÁTICAMENTE) MATICALMENTE el ancho para ajustarse exactamente con el div de envoltura, incluido el relleno. Ancho 100% expande el ancho y agrega el relleno.

¿Qué hay de envolverlo en un recipiente? El contenedor debe tener un estilo como:

{
    width:100%;
    border: 10px solid transparent;
}

Prueba esto:

width: 100%;
box-sizing: border-box;

Para mí, usando margin:15px;padding:10px 0 15px 23px;width:100%, el resultado fue este:

La solución para mí fue usar en width:autolugar de width:100%. Mi nuevo código fue:

margin:15px;padding:10px 0 15px 23px;width:auto. Entonces el elemento se alineó correctamente:

Tuve el mismo problema. Arreglarlo así:

width: 100%;
box-sizing: border-box;

Puedes hacerlo:

width: auto;
padding: 20px;