Forniamo in questa pagina una serie di esempi in grado di chiarire meglio il funzionamento di questa proprietà. Ci limitiamo a quei valori che sono più utili e ben implementati da tutti i browser.
Ricordate la prima lezione? Definizione di elementi blocco: sono quelli che quando vengono inseriti in un documento danno origine ad una nuova riga. Bene, con la proprietà display possiamo stravolgere anche questa regola tanto basilare.
Codice:
p.par1 {
display : inline;
background : Silver;
}
Questo è un primo paragrafo con display:inline.
Questo è un secondo paragrafo per il quale ho anche impostato la proprietà display:inline. Proprio per questo non compare sulla riga successiva. Il suo comportamento come elemento blocco è stato superato.
Ed ora una prova contraria. Prenderemo un'immagine, che è di default trattata come un elemento inline e la imposteremo come elemento blocco. Prima vediamo il comportamento standard. All'immagine sotto non abbiamo asegnato alcun stile.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Ed ora applichiamo questa classe:
img.imag1 {
display : block;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Chiara la differenza? Nel secondo caso l'immagine si trova su una riga diversa come un qualsiasi elemento blocco.
Riprendiamo la nostra immagine per verificare il funzionamento della proprietà display:none.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.
Se date un'occhiata al codice l'immagine c'è ma non si vede:
img.nodisp {
display : none;
}
Come ti trasformo un paragrafo in una lista.
Codice:
.par2 {
display : list-item;
list-style-type : square;
margin-left: 15px;
}
Questo è un paragrafo ma sembra un list-item.