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

93

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?

css html

— Ryan
fonte

72

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

— Juraj Blahunka
fonte

Só quero esclarecer, não tenho certeza, mas isso só funcionaria para preenchimento horizontal certo? Como height: auto não preenche o pai como width: auto faz.

— Jonathan Azulay

196

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.

— adswebwork
fonte

Funciona como um encanto, sou novato, basta pesquisar esta propriedade e funciona Grande Homem .....

— nida

1

Há algum efeito colateral que devo estar ciente ao usar isso?

— Radi

15

Esta solução é melhor do que a aceita, e é seguro não usar mais prefixos: shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork Você economizou grande parte do meu tempo. Obrigado.

— Hardik Chaudhary

17

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.

— Wsanville
fonte

css3 ainda é muito novo como o iPad :)

— Ryan

9

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.

— KA
fonte

5

essa é a mesma resposta de @adswebwork, certo? Agradeço a explicação de como funciona, mas provavelmente é melhor como um comentário

— craq

1

por que postar uma resposta idêntica

— Andrew

4

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.

— Pekka
fonte