CSS Display (Visualizzazione)

L'attributo display specifica il tipo di riquadro generato dall'elemento, di solito utilizzati i valori corrispondenti a display sono block, none, inline.

Attributo di visualizzazione CSS

La specifica CSS definisce il valore predefinito di visualizzazione di tutti gli elementi, ad esempio l'elemento <div> viene visualizzato come blocco, mentre l'elemento <span> viene visualizzato come embed.

Modificare il valore predefinito di visualizzazione

Il valore predefinito di visualizzazione coperto dell'elemento è un'importante implicazione dell'attributo display. Ad esempio, cambiare un elemento inline a un elemento bloccante, o viceversa.

La seguente sezione descrive i valori di visualizzazione CSS più utilizzati.

Visualizzare come blocco (Block)

Il valore block dell'attributo display forza il comportamento dell'elemento a essere simile abloccanteelemento, ad esempio<div>o<p>elemento. Le seguenti regole di stile nell'esempio:<span>e <a>L'elemento viene visualizzato come elemento a livello bloccante:

span {
　　　　display: block;
}
a {
　　　　display: block;
}

Visualizzare inline (inline)

Il valore inline dell'attributo display fa sì che l'elemento si comporti comelivello inlineelemento, ad esempio<span>o<a>elemento. Le seguenti regole di stile nell'esempio:<p>e <li>L'elemento viene visualizzato come elemento a livello inline:

p {
　　　　display: inline;
}
ul li {
　　　　display: inline;
}

Visualizzare il blocco inline (inline-block)

Il valore inline-block dell'attributo display fa sì che l'elemento generi una scatola quadrata che scorre insieme al contenuto circostante, ossia in una riga con il contenuto adiacente. Le seguenti regole di stile:<div>e <span>L'elemento viene visualizzato come blocco inline:

div {
　　　　display: inline-block;
}
span {
　　　　display: inline-block;
}

Non visualizzare (none)

Quando l'attributo display è none, l'elemento non genera alcun riquadro e non viene visualizzato nella pagina. Gli elementi figli non generano alcun riquadro nemmeno se il loro attributo di visualizzazione è impostato su non. Il documento presentato sembra che l'elemento non esista nel albero del documento.

h1 {
　　　　display: none;
}
p {
　　　　display: none;
}