Le differenze tra elementi a livello di blocco e in linea

HTML è composto da vari elementi che fungono da elementi costitutivi delle pagine web. Ciascuno di questi elementi rientra in una delle due categorie: elementi a livello di blocco o un elemento in linea. Comprendere la differenza tra questi due tipi di elementi è un passo importante nella creazione di pagine web.

Elementi a livello di blocco

Quindi cos'è un elemento a livello di blocco? Un elemento a livello di blocco è un elemento HTML che inizia una nuova riga su una pagina web ed estende l'intera larghezza dello spazio orizzontale disponibile del suo elemento padre. Crea grandi blocchi di contenuto come paragrafi o divisioni di pagina. In effetti, la maggior parte degli elementi HTML sono elementi a livello di blocco.

Gli elementi a livello di blocco vengono utilizzati all'interno del corpo del documento HTML. Possono contenere elementi in linea, così come altri elementi a livello di blocco.

Elementi in linea

A differenza di un elemento a livello di blocco, un elemento in linea:

instagram viewer

Può iniziare all'interno di una riga.
Non inizia una nuova riga.
La sua larghezza si estende solo nella misura in cui è definita dai suoi tag.

Un esempio di elemento in linea è il , che rende il carattere del contenuto di testo contenuto in grassetto. Un elemento in linea generalmente contiene solo altri elementi in linea, oppure non può contenere nulla, come ad esempio il
tag di rottura.

C'è anche un terzo tipo di elemento in HTML: quelli che non vengono visualizzati affatto. Questi elementi forniscono informazioni sulla pagina ma non vengono visualizzati durante il rendering in un browser Web.

Per esempio:

definisce i metadati.
è l'elemento del documento HTML che contiene questi elementi.

Cambiare i tipi di elementi in linea e di blocco

Puoi cambiare il tipo di un elemento da inline a block, o viceversa, usando una di queste proprietà CSS:

```
blocco di visualizzazione; 
```
```
display: in linea; 
```
```
display: nessuno;
```

Il CSS la proprietà display ti consente di modificare una proprietà in linea in un blocco o un blocco in in linea oppure non mostrare affatto.

Quando modificare la proprietà di visualizzazione

In generale, lascia stare la proprietà di visualizzazione, ma ci sono alcuni casi in cui può essere utile scambiare le proprietà di visualizzazione in linea e di blocco.

Menu elenco orizzontale: Gli elenchi sono elementi a livello di blocco, ma se vuoi che il tuo menu venga visualizzato orizzontalmente, devi convertire l'elenco in un elemento in linea in modo che ogni voce di menu non inizi su una nuova riga.
Intestazioni nel testo: A volte potresti volere che un'intestazione rimanga nel testo, ma mantieni i valori dell'intestazione HTML. La modifica dei valori da h1 a h6 in inline consentirà al testo che viene dopo il tag di chiusura di continuare a scorrere accanto ad esso sulla stessa riga, invece di iniziare su una nuova riga.
Rimozione dell'elemento: Se vuoi rimuovere completamente un elemento dal documento flusso normale, è possibile impostare il display su
```
nessuna
```
Una nota, fai attenzione quando usi il display: nessuno. Anche se quello stile renderà effettivamente invisibile un elemento, non vorrai mai usarlo per nascondere il testo che hai aggiunto per motivi SEO, ma non vuoi che venga mostrato ai visitatori. Questo è un modo infallibile per penalizzare il tuo sito per un approccio black hat alla SEO.

Errori comuni di formattazione degli elementi in linea

Uno degli errori più comuni commessi da un principiante del Web design è cercare di impostare una larghezza su un elemento in linea. Questo non funziona perché le larghezze degli elementi in linea non sono definite dalla casella del contenitore.

Gli elementi in linea ignorano diverse proprietà:

```
larghezza
```
e
```
altezza
```
```
larghezza massima
```
e
```
altezza massima
```
```
larghezza minima
```
e
```
altezza minima
```

Microsoft Internet Explorer (sostituito da Microsoft Edge) in passato ha applicato erroneamente alcune di queste proprietà anche alle caselle in linea. Questo non è conforme agli standard. Questo potrebbe non essere il caso delle versioni più recenti del browser Web di Microsoft.

Se hai bisogno di definire la larghezza o l'altezza che un elemento dovrebbe occupare, ti consigliamo di applicarla all'elemento a livello di blocco contenente il tuo testo in linea.