Precisazione sul box model e il width

[pictor]

So che è una FAQ.... e pensavo di conoscerne la risposta.
Ma adesso leggendo da varie fonti mi sto confondendo le idee.

La questione è il nostro tanto caro box model.

Ditemi se sbaglio....
... il W3C definisce la proprietà "width" come la larghezza del blocco contenuto (esclusi margini, bordi e padding). Ma su altre fonti leggo che il box è costituito solo da contenuto, padding e bordo.... quindi escluso il margin. Di conseguenza il width si riferisce al (cambia solo a livello di correttezza) contenuto, esclusi solo padding e bordi.

... Internet Explorer (dalla 5.5 in giù o compresa anche la 6.0?) invece per "width" intende la dimensione totale somma di:
Margini + Bordi + Padding + Contenuto.

E' così?

Perchè stavo leggendo il libro "CSS: Guida Completa" di Gianluca Troiani e invece pare che l'interpretazione di Internet Explorer (solo <= 5.5 ... ma pare a in base al 'quirk mode' [?] anche la versione 6.0) sia con il "width" che identifica la somma delle dimensioni di:

Bordi + Padding + Contenuto .... escludendo quindi i margini (e qua dice la stessa cosa del libro)

Pensavo di averlo capito ma ora sto rileggendo documenti ovunque e tutti dicono la loro versione!!

Quindi:

- Secondo il W3C il box è identificato da:

• Bordi, padding e contenuto
• Margini, Bordi, padding e contenuto

?

- Secondo il W3C la proprietà width si riferisce al solo blocco del contenuto, no? (esclusi padding, bordi e, forse, margin)

- Secondo Internet Explorer 5.5 la proprietà "width" si riferisce alla somma:

• Bordi, padding e contenuto
• Margini, Bordi, padding e contenuto

?

Insomma mi fate chiarezza perchè mi sto impappando il cervello

Grazie

[Mich_]

Per quanto mi risulti (spero di non aumentare l'entropia):
La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin

In IE (quirks mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

IE6, quando la DTD e` XHTML 1.0 Strict, segue lo standard; negli altri casi (quirks mode, XHTML Transitional, HTML tutte le versioni) segue la sua regola.
La DTD XHTML 1.1 o successive non sono possibili in IE6, dato che non e` possibile definirle senza il prologo HML, e con il prologo IE6 va automaticamente in quirks mode (non interpreta il DOCTYPE).

[pictor]

Originariamente inviato da Mich_
Per quanto mi risulti (spero di non aumentare l'entropia):
La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin

Ok... quella era l'unica cosa di cui ero sicuro
Il W3C identifica com width solamente il contenuto. Per ottenere la larghezza totale vi si aggiungono padding, bordi e margini.

Ma il W3C considera un 'box' l'elemento senza margin? (quindi solo contenuto + bordi + padding?)

In IE (quirks mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

Mmm... :master:
Quindi IE identifica come box sempre contenuto+bordi+padding?
Il "width" determina la dimensione di contenuto+bordi+padding?
Non sono inclusi i margini? (come mi sembra invece viene spiegato su HTML.it)

Mentre, sempre per IE, la larghezza totale è il width (contenuto+padding+bordi) sommato ai margini?

IE6, quando la DTD e` XHTML 1.0 Strict, segue lo standard; negli altri casi (quirks mode, XHTML Transitional, HTML tutte le versioni) segue la sua regola.
La DTD XHTML 1.1 o successive non sono possibili in IE6, dato che non e` possibile definirle senza il prologo HML, e con il prologo IE6 va automaticamente in quirks mode (non interpreta il DOCTYPE).

Sì questo lo sapevo.... purtroppo

Ho bisogno di chiarirlo perchè se non c'ho le basi solide è un macello....

[Mich_]

Quello che sapevo con sicurezza l'ho scritto.
Per approfondire occorre fare alcune prove.

Potresti ad esempio farti uno sfondo a riquadri regolari, ad esempio fatto di quadrati di 10 px di lato, come quello allegato (che pero` ho fatto di corsa: va verificato) da inserire nel body, e poi inserisci i vari box con e senza margini, bordi e padding, opportunamente colorati, e misuri quanto occupano.
Devi provare in vari browser, e con vari DOCTYPE (oltre che senza).

Per quanto riguarda la definizione di "box", secondo me comprende:
1. spazio interno,
2. padding,
3. border e
4. margin,
dove pero` il padding ha lo sfondo dell'interno, il border ha un colore suo e il margin ha lo sfondo del box esterno.

[andrea.paiola]

etvoilà
http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions
http://www.diodati.org/w3c/css2/box.html#box-dimensions

http://www.constile.org/tutorial/IE5_box_model/

per box si intende qualsiasi elemento che sia display:block, se non sbaglio

il padding è dentro il border ( e ha lo sfondo dell'elemento) e il margin è fuori dal border ed è trasparente... scusate se ho ribadito cose già note