Come modificare un riempimento DIV senza influire sulla larghezza/altezza?

Question

Ho un div che voglio specificare una larghezza e un'altezza FISSA per, e anche un padding che può essere cambiato senza diminuire la larghezza/altezza del DIV originale o aumentarlo, c'è un trucco CSS per questo, o un'alternativa usando imbottitura?

Answer 1

soluzione è quella di avvolgere il vostro imbottita div, con div esterno larghezza fissa

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

Per ottenere un risultato coerente tra browser, di solito si aggiunge un altro div all'interno dello div e si assegna che non c'è larghezza esplicita e un margin. Lo margin simulerà padding per il div esterno.

Answer 3

Suona come seicercando di simulare il modello di box IE6. È possibile utilizzare la proprietà CSS 3 box-sizing: border-box per raggiungere questo obiettivo. Questo è supportato da IE8, ma per Firefox è necessario utilizzare -moz-box-sizing e per Safari/Chrome, utilizzare -webkit-box-sizing.

IE6 calcola già l'altezza sbagliata, quindi sei bravo in quel browser, ma non sono sicuro di IE7, penso che calcolerà l'altezza allo stesso modo in modalità quirk.

Answer 4

Declare questo nel vostro CSS e si dovrebbe essere buono:

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

Questa soluzione può essere implementata senza l'utilizzo di involucri aggiuntivi

Answer 5

provare questo trucco

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

questo costringerà il browser per calcolare la larghezza secondo la larghezza "esterna" del div, significa che il riempimento sarà sottratto dalla larghezza.