C'è un motivo per cui il riempimento si aggiunge alla dimensione di un elemento?

Question

Sono rimasto molto sorpreso quando ho trovato che un <div> con una dimensione di - diciamo - 200px diventa 220px di larghezza se si dà il padding 10px. Non ha senso per me, la dimensione esterna non dovrebbe cambiare quando lo fa una regolazione interna. Ti costringe a regolare le dimensioni ogni volta che modifichi il padding.

Sto facendo qualcosa di sbagliato, o c'è una ragione per questo comportamento?

EDIT: So che questo è come dovrebbe funzionare, la mia domanda è perché? È logico in un modo che non capisco? Ciò offre qualche vantaggio rispetto all'approccio opposto di mantenere separate le dimensioni e l'imbottitura?

Answer 1

Ci sono due diversi cosiddetti "modelli contenitore", si aggiunge l'imbottitura (e di frontiera) al specificato width, mentre l'altro no. Con l'avvento dei CSS3, puoi passare per fortuna tra i due modelli. Più precisamente, il comportamento che stai cercando può essere ottenuto specificando

box-sizing: border-box; 
ms-box-sizing: border-box; 
webkit-box-sizing: border-box; 
moz-box-sizing: border-box; 
width: 200px; 

nel CSS del tuo div. Quindi, nei browser moderni, il div resterà sempre largo di 200 px, a prescindere da cosa. Per ulteriori dettagli e un elenco di browser supportati, vedere this guide.

Edit: WRT tua modifica per perché il box model tradizionale è come è, Wikipedia in realtà offers some insight:

Prima di HTML 4 e CSS, pochissimi elementi HTML supportati sia border e padding quindi la definizione della larghezza e dell'altezza di un elemento non era molto controverso. Tuttavia, variava a seconda dell'elemento. L'attributo width HTML di una tabella ha definito la larghezza della tabella includendo il suo bordo. D'altra parte, l'attributo larghezza HTML di un'immagine ha definito la larghezza dell'immagine stessa (all'interno di qualsiasi bordo). L'unico elemento per supportare il riempimento in quei primi giorni era la cella del tavolo. La larghezza per la cella è stata definita come "la larghezza suggerita per un contenuto di cella in pixel escludendo il riempimento della cella".

CSS introdotto margine, bordo e riempimento per molti più elementi. Ha adottato una larghezza di definizione in relazione a contenuto, bordo, margine e riempimento simile a quella di una cella di tabella. Da allora è diventato noto come il modello box W3C.

Answer 2

Il riempimento è supposto in aggiunta alla larghezza specificata di un oggetto.

Vedere il CSS 2.1 specification for box model.

Mentre è vero che è possibile visualizzare il riempimento come un attributo interno o esterno, il fatto è che in base alle specifiche correnti è un attributo esterno. Era una scelta tra due, per quanto posso dire, opzioni ugualmente valide.

Non ho letto sull'attributo box-model, ma supponendo che alex abbia ragione, in futuro sarà possibile scegliere tra i due modi di interpretare il riempimento.

Answer 3

Se la dimensione aumenta con il riempimento, funziona come previsto. Nei browser con modelli di box non funzionanti come le versioni precedenti di Internet Explorer, il div sarà largo 100 pixel, ma questa è una gestione scorretta del CSS.

http://www.w3schools.com/css/css_boxmodel.asp

Answer 4

Il motivo per cui è così che tecnicamente si suppone che la larghezza degli elementi si applichi al contenuto, non al contenitore.

In base alle specifiche CSS1, pubblicato dal World Wide Web Consortium (W3C) nel 1996 e rivisto nel 1999, quando una larghezza o altezza è esplicitamente specificato per ogni elemento a livello di blocco, si deve determinare solo la larghezza o altezza dell'elemento visibile, con il riempimento, i bordi e i margini applicati in seguito.

More info about this behavior *

* Disclaimer: Sì, questo è il mio blog e penso di aver fatto un lavoro approfondito di spiegare il modello di scatola così sto mettendo come riferimento.

Answer 5

Se il modello box ha fatto non in questo modo, come gestireste il riempimento attorno a un'immagine? Preferiresti che le dimensioni di un elemento img con padding non corrispondessero alle dimensioni in pixel dell'immagine? O che il padding copre l'immagine?

È preferibile che il comportamento predefinito sia che la larghezza del contenitore non è influenzata dai valori di riempimento o margine.

Answer 6

"" Se il modello di box non funzionasse in questo modo, come gestiresti il ​​padding attorno a un'immagine? Preferiresti che le dimensioni di un elemento img con padding non corrispondessero alle dimensioni in pixel dell'immagine? O che il padding copra l'immagine? ""

Prima di tutto, qualsiasi buon sviluppatore web potrebbe sapere meglio di mettere un'immagine in un contenitore dove non si adatta. Lo sviluppo è 101. Se il padding non consente l'immagine, l'immagine o il padding dovrebbero essere cambiati. Puro e semplice. Quindi l'argomento sopra menzionato è errato.

Il riempimento è un'impostazione interna, interna ai limiti del contenitore. Quindi, quando qualcosa si trova all'interno di quel contenitore e si aumenta il riempimento del contenitore, gli elementi all'interno di quel contenitore devono essere codificati in modo da ridurne le dimensioni.

La parola "padding" dice tutto. Riesci a immaginare se UPS ha aggiunto il riempimento alle scatole per proteggere il contenuto all'interno, solo per scoprire che la scatola aumenta di dimensioni! Ridicolo, giusto? Ovviamente è! L'imbottitura è pensata per aggiungere spazio all'interno di un contenitore SENZA il contenitore che si rompe e si espande in altezza o larghezza.

Sono browser come mozilla, gecko e opera che hanno modelli di box non funzionanti, non IE. Il modello di box che implementa il "consordium" è nel migliore dei casi difettoso e causa scompiglio agli sviluppatori web.

Se il "consordium" implementava lo stesso modello di box di IE, allora noi sviluppatori avremmo un tempo molto più facile con le colonne delle nostre pagine web. Penso che tu debba essere d'accordo con me su questo punto. Chiaro e semplice.

Sono così stanco di persone che dicono che IE è inferiore. Posso dare un sacco di esempi dove IE tiene duro mentre i browser più economici come Firefox si rompono sotto la pressione.

I miei due centesimi. Odiarmi se vuoi, ma quello che dico è buonsenso e nient'altro.

Answer 7

Se la casella si trova in una scatola, rimuovere la larghezza della scatola interna (quella con il padding) e risolverà il problema.