Aggiungere il riempimento senza modificare la larghezza complessiva

Question

Come aggiungere un riempimento a un elemento senza aggiungere la larghezza predefinita?

È utile definire la larghezza di una colonna per creare una griglia pulita per il layout; ma vuole anche aggiungere padding ai contenuti all'interno della colonna. Qualche modo per specificarlo?

Answer 1

element { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

Answer 2

casella Usa-dimensionamento, rende padding inclusiva: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

Esempio:

div { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; /* Firefox */ 
    -webkit-box-sizing:border-box; /* Safari */ 
} 

Vale la pena notare che questo non funzionerà su IE7.

per IE8, si prega di vedere la risposta in alto a questa Q: box-sizing: border-box => for IE8?

Answer 3

Ogni volta che si aggiunge imbottitura per bloccare elemento, la larghezza di questo elemento viene modificato. Questo problema ha molte soluzioni. Di solito imposta margin sul primo elemento figlio e imposta width: 100% per questo elemento.

Per esempio, abbiamo:

<div id="main"> 
    <div id="child"> 
     This is content with margin 
    </div> 
</div> 

stile CSS per questi elementi:

#main { 
    border: solid 1px red; 
    float: left; 
    width: 5em; 
} 

#child { 
    border: solid 1px blue; 
    float: left; 
    width: 100%; 
    margin: 0.5em; 
} 

Si tratta di una soluzione per qualsiasi browser

Answer 4

E 'un vecchio filo, lo so. Ma l'ultima volta ho avuto un buco nero completo sulla creazione di un DIV con una larghezza NON impostata e con paddings, quindi non farà esplodere la mia riga di 3 colonne e con CSS2. Così ho messo un DIV con float a sinistra, a destra e tra di loro un DIV senza float e senza larghezza fissa, ma volevo avere padding in esso. Che ne dici ...

Mi sono svegliato. : D Ma ho inserito un DIV interno in quello centrale e gli ho dato larghezza = 90%. Fin qui tutto bene, una soluzione molto semplice e non eccezionale, ma a volte aiuta a ottenere l'aspetto che cerchi. ;]

b.r.