CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS display

La proprietà CSS display definisce il tipo di visualizzazione dell'elemento

La proprietà display determina il comportamento dell'elemento nel flusso del layout: se si comporta come un blocco, in linea, flessibile, griglia o se è nascosto. È una delle proprietà fondamentali per strutturare visivamente una pagina web.

Sintassi

display: valore;

Significato dei valori principali:

  • block: l’elemento viene visualizzato come un blocco (es. <div>). Occupa l’intera larghezza disponibile.

  • inline: l’elemento è visualizzato in linea (es. <span>). Non interrompe il flusso del testo.

  • inline-block: come inline ma con la possibilità di impostare larghezza e altezza.

  • none: l’elemento non viene visualizzato e non occupa spazio nel layout.

  • flex: l’elemento diventa un contenitore Flexbox.

  • grid: l’elemento diventa un contenitore CSS Grid.

  • contents: rende invisibile il contenitore ma lascia visibili i figli.

  • inherit | initial | unset: valori standard per ereditare o ripristinare il comportamento.


Esempio proprietà: display


Codice Esempio: display

CODE: CSSpreleva codice
  1. .box {
  2.   padding: 10px;
  3.   margin: 8px 0;
  4.   color: white;
  5.   font-size: 16px;
  6. }
  7.  
  8. .block-example {
  9.   display: block;
  10.   background-color: #4078f2;
  11. }
  12.  
  13. .inline-example {
  14.   display: inline;
  15.   background-color: #50a14f;
  16. }
  17.  
  18. .inline-block-example {
  19.   display: inline-block;
  20.   background-color: #d19a66;
  21.   width: 100px;
  22.   height: 200px;
  23. }
  24.  
  25. .none-example {
  26.   display: none;
  27. }

Contenuto Esempio: display

Esempio di utilizzo della proprietà display

In questo esempio, viene mostrato il comportamento di diversi valori di display su elementi simili:


Display: block (div intero blocco)
Display: inline
Display: inline-block (in linea ma con larghezza e altezza)
Questo elemento ha display: none e non si vede


CSS e HTML per l'esempio:

  
  <style>
    .box {
      padding: 10px;
      margin: 8px 0;
      color: white;
      font-size: 16px;
    }

    .block-example {
      display: block;
      background-color: #4078f2;
    }

    .inline-example {
      display: inline;
      background-color: #50a14f;
    }

    .inline-block-example {
      display: inline-block;
      background-color: #d19a66;
      width: 100px;
      height: 200px;
    }

    .none-example {
      display: none;
    }
  </style>

  <span class="block-example box">Display: block (span intero blocco)</span>
  <div class="inline-example box">Display: inline</div>
  <div class="inline-block-example box">Display: inline-block (in linea ma con larghezza e altezza)</div>
  <div class="none-example box">Questo elemento ha display: none e non si vede</div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies