Quando una scatola in linea che contiene un quadro a livello di blocco nel flusso, la casella di linea (ei suoi antenati linea all'interno della stessa casella riga) sono rotti intorno alla scatola di blocco (e tutti i fratelli a livello di blocco che sono consecutivi o separati solo da spazi bianchi e/o elementi fuori flusso comprimibili), suddividendo la casella in linea in due caselle (anche se entrambi i lati sono vuoti), uno su ciascun lato del blocco -level box (es). Le caselle di riga prima dell'interruzione e dopo l'interruzione sono racchiuse in riquadri di blocco anonimi e la casella a livello di blocco diventa un fratello di quelle caselle anonime. Quando una tale casella in riga è influenzata dal posizionamento relativo, qualsiasi traslazione risultante influisce anche sulla casella a livello di blocco contenuta nella casella in linea.
Questo modello si applicherebbe nel seguente esempio se le seguenti regole:
p { display: inline }
span { display: block }
sono stati utilizzati in questo documento HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>
L'elemento P contiene un pezzo (C1) di testo anonimo seguito da un elemento a livello di blocco seguito da un altro blocco (C2) di testo anonimo. Le caselle risultanti sarebbero una casella di blocco che rappresenta il BODY, contenente una casella di blocco anonimo attorno a C1, la casella di blocco SPAN e un'altra casella di blocco anonimo attorno a C2.
Le proprietà delle caselle anonime vengono ereditate dalla casella non anonima che racchiude (ad esempio, nell'esempio appena sotto l'intestazione di sottotitolo "Caselle di blocco anonime", quella per DIV). Le proprietà non ereditate hanno il loro valore iniziale. Ad esempio, il carattere della casella anonima viene ereditato dal DIV, ma i margini saranno 0.
Le proprietà impostate su elementi che causano la generazione di block box anonimi si applicano ancora alle caselle e al contenuto di tale elemento. Ad esempio, se un bordo è stato impostato sull'elemento P nell'esempio precedente, il bordo verrà disegnato attorno a C1 (aperto alla fine della riga) e C2 (aperto all'inizio della riga).
Alcuni agenti utente hanno implementato i bordi su inline contenenti blocchi in altri modi, ad esempio, avvolgendo tali blocchi nidificati all'interno di "caselle di riga anonime" e quindi disegnando bordi in linea attorno a tali riquadri. Dato che CSS1 e CSS2 non hanno definito questo comportamento, gli agenti utente solo CSS1 e CSS2 possono implementare questo modello alternativo e rivendicare comunque la conformità a questa parte del CSS 2.1. Questo non si applica agli UA sviluppati dopo che questa specifica è stata rilasciata.
Fai quello che vuoi. Chiaramente il comportamento è specificato nei CSS, anche se non è chiaro se copra tutti i casi o sia implementato in modo coerente nei browser di oggi.
Sono contento che html5 consideri questo codice valido, ma valido non è la fine di tutto il web. The Googles utilizza un codice che sembra zuppa di tag orribilmente rotta, ma funziona. – JKirchartz