Qual è il significato principale della proprietà display in CSS e come funziona?

La proprietà display determina come un elemento verrà visualizzato nel documento e come interagirà con altri elementi, partecipando al flusso di layout (layout flow). Essa definisce il tipo di blocco di formattazione dell'elemento.

Valori principali:

• block: L'elemento viene formattato come blocco. Occupa tutta la larghezza disponibile, inizia su una nuova riga e può avere dimensioni definite (width, height).
• inline: L'elemento viene formattato come inline. Non inizia una nuova riga, occupa solo la larghezza necessaria e non può avere dimensioni definite (width, height). Margini verticali (margin-top, margin-bottom) e padding interno (padding-top, padding-bottom) non influenzano gli elementi circostanti.
• inline-block: L'elemento viene formattato come inline, ma si comporta come un blocco all'interno della riga. Non inizia una nuova riga, può avere dimensioni definite (width, height) e margini e padding che influenzano gli elementi circostanti.
• none: L'elemento e il suo contenuto non vengono visualizzati. L'elemento viene completamente rimosso dal flusso del documento e non occupa spazio.
• flex: L'elemento diventa un contenitore Flex, e i suoi discendenti diretti diventano elementi Flex. Usato per creare layout flessibili.
• grid: L'elemento diventa un contenitore Grid. Usato per creare layout basati su griglia.

Come funziona:

Il browser utilizza il valore display per determinare il tipo di contesto di formattazione in cui si trova l'elemento. Questo influisce su:

• Il flusso del documento: Come l'elemento si posiziona rispetto ai suoi vicini.
• Le dimensioni dell'elemento: La possibilità di impostare larghezza e altezza e l'influenza del contenuto sulle dimensioni.
• L'influenza sugli elementi circostanti: Come i margini e le dimensioni dell'elemento influenzano la disposizione degli altri elementi.

Esempio:

/* Elemento con display: block */
div {
  display: block;
  width: 100%; /* Occupa tutta la larghezza */
  margin-bottom: 10px; /* Crea uno spazio verticale */
}

/* Elemento con display: inline */
span {
  display: inline;
  /* width e height vengono ignorati */
  /* margin-top e margin-bottom vengono ignorati */
}

/* Elemento con display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Può essere impostata la larghezza */
  height: 100px; /* Può essere impostata l'altezza */
  margin: 5px; /* Crea margini su tutti i lati */
}

/* Elemento nascosto */
.hidden {
  display: none;
}