la proprietà "display"

display è la più importante proprietà CSS per il controllo dell'impaginazione. Ciascun elemento ha un valore predefinito di display a seconda del tipo di elemento di cui si tratta. Il valore predefinito per la maggior parte degli elementi è solitamente block oppure inline. Un elemento block è spesso chiamato elemento block-level. Un elemento inline è chiamato inline e basta.

block

<div>

div è l'elemento block-level di base. Un elemento block-level inizia su una nuova riga e si allunga da sinistra a destra più che può. Altri elementi block-level comuni sono p e form, in nuovi di HTML5 header, footer, section, e altri.

</div>

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.

You found me!

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.

  • Creative Commons License
  • Ads by Bocoup