inline
span
è l'elemento inline di base. Un elemento inline può anche racchiudere del testo all'interno un paragrafo
<span>
come questo
</span>
senza disturbare il flusso di quel paragrafo. L'elemento a
è il più comune elemento inline, poiché lo utilizzi per i link.
none
Un altro valore comune di display è none
. Alcuni elementi specializzati come script
lo usano come valore predefinito. È utilizzato comunemente con JavaScript per nascondere e far riapparire elementi senza doverli davvero eliminare per poi ricrearli subito dopo.
È differente da visibility
. Impostare display
a none
farà in modo che la pagina venga disegnata come se l'elemento non esistesse. visiblity: hidden;
nasconderà l'elemento, ma l'elemento occuperà comunque lo spazio che avrebbe occupato se fosse stato completamente visibile.
altri valori di display
Ci sono un sacco di valori più esotici per display, come list-item
e table
. Qui una lista esaustiva. Parleremo di inline-block
e flex
più avanti.
informazioni extra
Come dicevo, ciascun elemento ha un tipo di display predefinito. Tuttavia, potrai sempre sovrascriverlo! Sebbene cose come fare un div inline non abbiano poi molto senso, potrai comunque usarlo per personalizzare la visualizzazione di elementi che hanno un preciso significato. Un esempio comune è rendere inline degli elementi li
per ottenere menù orizzontali.