¿Cómo cambiar un relleno DIV sin afectar el ancho/alto?

Question

Tengo un div para el que quiero especificar un ancho y una altura FIJOS, y también un relleno que se puede cambiar sin disminuir el ancho/alto del DIV original o aumentarlo, ¿hay algún truco de CSS para eso, o una alternativa usando ¿relleno?

Answer 1

solución es envolver su div acolchada, con div externa ancho fijo

HTML

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

     <!-- your content --> 

    </div><!-- end .inner --> 
</div><!-- end .outer --> 

CSS

.outer, .inner { 
    display: block; 
} 

.outer { 
    /* specify fixed width */ 
    width: 300px; 
    padding: 0; 
} 

.inner { 
    /* specify padding, can be changed while remaining fixed width of .outer */ 
    padding: 5px; 
} 

Answer 2

para lograr un resultado consistente con navegadores, que se suele añadir otro div dentro del div y darle que ningún anchura explícita, y una margin. El margin simulará padding para el div externo.

Answer 3

Suena como si estuvieras buscando simular el modelo de caja IE6. Puede usar la propiedad CSS 3 box-sizing: border-box para lograr esto. Esto es compatible con IE8, pero para Firefox debe usar -moz-box-sizing y para Safari/Chrome, use -webkit-box-sizing.

IE6 ya calcula la altura incorrecta, por lo que está bien en ese navegador, pero no estoy seguro acerca de IE7, creo que calculará la altura de la misma manera en modo peculiar.

Answer 4

nuevas de esto en tu CSS y usted debe ser bueno:

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

Esta solución se puede implementar sin necesidad de utilizar envolturas adicionales

Answer 5

intentar este truco

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

Esto forzará al navegador para calcular el ancho de acuerdo con el ancho "externo" de div, significa que el relleno se restará del ancho.