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

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

La solución es envolver su div acolchado , con div exterior de 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;
}

Declare esto en su CSS y debería ser bueno:

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

Esta solución se puede implementar sin utilizar envoltorios adicionales.

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

Parece que estás buscando simular el modelo de caja IE6. Puede usar la propiedad de CSS 3 box-sizing: border-box para lograr esto. Esto es compatible con IE8, pero para Firefox necesitaría usar -moz-box-sizingy para Safari / Chrome, use -webkit-box-sizing.

IE6 ya calcula la altura de forma incorrecta, por lo que eres bueno en ese navegador, pero no estoy seguro de IE7, creo que calculará la altura de la misma manera en el modo peculiar.

prueba este truco

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

esto obligará al navegador a calcular el ancho de acuerdo con el ancho "externo" del div, lo que significa que el relleno se restará del ancho.

Para lograr un resultado coherente en varios navegadores, normalmente agregaría otro divdentro de divy no le daría un ancho explícito, y un margin. El marginsimulará paddingpara el div externo.