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
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
inlinema 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
.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;
}
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)
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
IP: 216.73.216.192
