📢 Nuovo Corso Tailwind Completo disponibile!

Elementi Block e Inline in HTML

Ogni elemento HTML ha un valore di visualizzazione predefinito, a seconda del tipo di elemento che è.

Ci sono due valori di visualizzazione: blocco (block) e inline.

Elementi a blocco

Un elemento a blocco inizia sempre su una nuova riga e i browser aggiungono automaticamente uno spazio (un margine) prima e dopo l’elemento.

Un elemento a blocco occupa sempre l’intera larghezza disponibile (si estende a sinistra e a destra quanto possibile).

Due elementi a blocco comunemente utilizzati sono: <p> e <div>.

L’elemento <p> definisce un paragrafo in un documento HTML.

L’elemento <div> definisce una divisione o una sezione in un documento HTML.

<p>Ciao, mondo</p>
<div>Ciao, mondo</div>

Ecco gli elementi a blocco in HTML:

Elementi inline

Un elemento inline non inizia su una nuova riga.

Un elemento inline occupa solo la larghezza necessaria.

<span>Ciao, mondo</span> <span>Ciao, mondo</span>

Ecco gli elementi in linea in HTML:

Elemento <div>

L’elemento <div> viene spesso utilizzato come contenitore per altri elementi HTML.

L’elemento <div> non ha attributi obbligatori, ma style, class e id sono comuni.

Quando usato insieme a CSS, l’elemento <div> può essere utilizzato per stilizzare blocchi di contenuto:

<div style="background-color:black;color:white;padding:20px;">
  <h2>Titolo</h2>
  <p>Questo è un paragrafo dentro un div a cui abbiamo cambiato colore.</p>
</div>

Elemento <span>

L’elemento <span> è un contenitore inline utilizzato per marcare una parte di testo o una parte di un documento.

L’elemento <span> non ha attributi obbligatori, ma style, class e id sono comuni.

Quando usato insieme a CSS, l’elemento <span> può essere utilizzato per stilizzare parti del testo:

<p>
  Il mio colore preferito è il
  <span style="color:blue;font-weight:bold;">blu</span>, mentre il tuo è il
  <span style="color:red;font-weight:bold;">rosso</span>.
</p>