CSS la larghezza include il padding?

132

Sembra che in IE la larghezza includa la dimensione del padding. mentre in FF, la larghezza no. Come posso fare in modo che entrambi si comportino allo stesso modo?CSS la larghezza include il padding?

Grazie.

fonte

2011-01-15 Jake

Probabilmente è necessario attivare la modalità conformi agli standard. Tuttavia, senza vedere alcun codice, non posso darti più indicazioni di questo. –

283

IE usato per usare il "border-box" più-conveniente-ma-non-standard di modello scatola. In questo modello, la larghezza di un elemento include il riempimento e i bordi. Ad esempio:
#foo { width: 10em; padding: 2em; border: 1em; }
sarebbe 10em largo.
Al contrario, tutti i browser che temono gli standard utilizzano il modello di box "content-box". In questo modello, la larghezza di un elemento corrisponde a non includendo spaziatura o bordi. Ad esempio:
#foo { width: 10em; padding: 2em; border: 1em; }
sarà effettivamente 16em ampia: 10em + 2em imbottitura per ogni lato, + 1em bordo per ciascun bordo.

Se si utilizza una versione moderna di IE con valid markup, un good doctype e appropriate headers che aderirà allo standard. In caso contrario, è possibile forzare moderni conformi agli standard dei browser da utilizzare "border-box" tramite:

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

La prima dichiarazione è necessaria per Opera, il secondo è per Firefox, il terzo è per Webkit e Chrome.

Ecco un semplice test che ho fatto anni fa per il test quello dichiarazione box-sizing il browser supporta: http://phrogz.net/CSS/boxsizing.html

noti che Webkit (Safari e Chrome) non supportano il modello padding-box scatola tramite qualsiasi dichiarazione.

fonte

2011-01-15 04:59:55 Phrogz

+1 per menzionare sia la casella del contenuto che i modelli di riquadri. Potrebbe voler elaborare le differenze però. – BoltClock

@BoltClock Grazie per l'impeto di rispondere più rigorosamente. Aggiornato. – Phrogz

Bella risposta; Ho cercato di ricordare (o trovare) i nomi delle diverse opzioni per un paio di giorni ora ... +1 =) –

Una regola semplice è cercare di evitare l'utilizzo della proprietà padding/margin e width per lo stesso elemento. vale a dire usare qualcosa di simile a questo

<div class="width-div"> 
    <div class="padding-div"> 
    ........... 
    ........... 
    </div> 
</div>

fonte

2011-01-15 04:59:44 shankhan

Uso questo metodo su base regolare e non ho mai problemi con il browser. –

Hai un doctype dichiarato? Quando ho iniziato a scrivere codice HTML ho avuto questo problema, ed era da non avere un doctype dichiarato. Il mio preferito è:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
... 
</html>

fonte

2011-01-15 15:28:23 tybro0103

mi sono imbattuto in questa domanda e anche se è un paio di anni, ho pensato che avrei potuto aggiungere questo nel caso qualcuno urta questo thread.

CSS3 ora ha una proprietà di ridimensionamento della casella. Se imposti, ad esempio,

.bigbox { 
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333; 
    padding: 10px; 
}

la tua classe sarà larga 1000px, invece di 1030px. Questo è, ovviamente, incredibilmente utile per chiunque usi il bordo di dimensioni pixel con div liquidi, perché risolve un problema altrimenti insolubile.

Ancora meglio, il dimensionamento della casella è supportato da tutti i principali browser tranne IE7 e seguenti.Per includere tutti gli elementi all'interno della dimensione larghezza o altezza, impostare il ridimensionamento della casella sul bordo-riquadro. Per aggregato altri elementi per la larghezza e/o l'altezza, che è l'impostazione predefinita, è possibile impostare il ridimensionamento della casella in "contenuto-box".

non sono sicuro dello stato attuale della sintassi del browser, ma ho ancora includono prefissi -moz e -webkit:

.bigbox{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

fonte

2014-02-10 17:36:09

Sì, e Paul Irish ha un bel articolo sul blog qui: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –

CSS la larghezza include il padding?

risposta

Problemi correlati