Display CSS

La propietà display in CSS permette di gestire il tipo di elementi presenti nelle pagine.

In genere i contenuti di una pagina sono visualizzati come elementi in linea (inline), elementi blocco (block) oppure come elementi di lista (list-item).

I browser visualizzano i tag secondo le loro impostazioni predefinite, ad esempio, il tag <li> corrisponde a una lista, mentre i tag <p> e <div> sono considerati degli elementi blocco.

Tamite la propietà display possiamo gestire questo tipo di elementi. Possiamo, ad esempio, trasformare una lista in un elemento in linea, oppure possiamo trasformare dei blocchi racchiusi dal tag <p> in una lista ordinata di elementi.

 

Esempi della propietà display:

  1. Display inline
  2. Display block
  3. Display list-item

display CSS


 

display inline

p { display:inline}

<p>primo paragrafo</p>
<p>secondo paragrafo</p>
<p>terzo paragrafo</p>

primo paragrafo

secondo paragrafo

terzo paragrafo

li { display:inline}

<ul>
<li>prima riga</li>
<li>seconda riga</li>
<li>terza riga</li>
</ul>

  • prima riga
  • seconda riga
  • terza riga

display CSS


 

display block

li { display:block; float:left}

<ul>
<li>prima riga</li>
<li>seconda riga</li>
<li>terza riga</li>
</ul>

  • prima riga
  • seconda riga
  • terza riga

display CSS


 

display list-item

p { display:list-item}

<p>primo paragrafo</p>
<p>secondo paragrafo</p>
<p>terzo paragrafo</p>

primo paragrafo

secondo paragrafo

terzo paragrafo


display CSS