Como alterar um padding DIV sem afetar a largura / altura?

Eu tenho um div para o qual desejo especificar uma largura e altura FIXAS, e também um preenchimento que pode ser alterado sem diminuir a largura / altura original do DIV ou aumentá-la. Existe um truque de CSS para isso ou uma alternativa de preenchimento?

A solução é envolver seu div preenchido , com div externo de largura fixa

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 isso em seu CSS e você deve ser bom:

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

Essa solução pode ser implementada sem usar wrappers adicionais.

Isso forçará o navegador a calcular a largura de acordo com a largura "externa" da div, o que significa que o preenchimento será subtraído da largura.

Parece que você está tentando simular o modelo de caixa do IE6. Você poderia usar a propriedade box-sizing: border-box do CSS 3 para fazer isso. Isso é suportado pelo IE8, mas para Firefox você precisa usar -moz-box-sizinge para Safari / Chrome, use -webkit-box-sizing.

O IE6 já calcula a altura incorretamente, então você é bom nesse navegador, mas não tenho certeza sobre o IE7, acho que ele calculará a altura da mesma forma no modo quirks.

tente este truque

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

isso forçará o navegador a calcular a largura de acordo com a largura "externa" da div, o que significa que o preenchimento será subtraído da largura.

Para obter um resultado consistente para o navegador cruzado, você normalmente adicionaria outro divdentro do dive não forneceria largura explícita, e a margin. O marginirá simular paddingpara o div externo.