Elementi di blocco e di linea

Essere consapevoli già da ora della distinzione fra elemento di blocco e di linea vi aiuterà ad avere una maggiore padronanza dei tag, riuscendo a prevedere i comportamenti in visualizzazione che potrebbero essere, in certi casi, inaspettati.

Anche se in questa guida introduttiva non ci soffermeremo sugli stili e sul posizionamento dei contenuti, conoscere la formattazione predefinita dagli elementi è un argomento che interessa soprattutto chi è alle prime armi.

Elementi di blocco

Quando si è alle prese con i linguaggi informatici, esistono tanti modi per ottenere lo stesso risultato.

Ad esempio, riprendiamo il codice che abbiamo scritto nella sezione precedente e vediamo come poter ottenere lo stesso risultato utilizzando due elementi paragrafo.

Hello World! <br />
Hello Creative Code

Proviamo a scrivere i due saluti sulla stessa linea, inserendoli in due <p> separati.

<p>Hello World!</p> <p>Hello Creative Code</p>

[immagine paragraph]

Come potete notare, pur avendo scritto i due saluti sulla stessa linea, il browser manda a capo il testo senza ricorrere al tag <br />. Inoltre, se provate ad aggiungere spazi o spostare il paragrafo a capo, la posizione degli elementi nella preview non cambia.

Questo comportamento è dovuto al fatto che il tag <p> è un elemento di blocco, ovvero un tipo di contenuto che andrà ad occupare tutta l’area ad esso adiacente, da sinistra a destra. Se il contenuto non dovesse riempire tutta la riga dello schermo, allora il browser genererà automaticamente un margine invisibile che riempirà il disavanzo della pagina. Tale margine può essere ad ogni modo visualizzato attraverso la developer tools (vedi immagine).

[immagine developer tools]

Ciò vorrà dire che qualsiasi altro tag dichiarato dopo un elemento di blocco, verrà visualizzato nel browser al rigo successivo. Ovviamente questo comportamento potrà essere regolato più avanti attraverso le regole CSS, non temete. 😉

Elementi di linea

Proviamo ora ad utilizzare il tag <b> per trasformare le parole “Hello” in grassetto.

<p><b>Hello</b> World!</p>
<p><b>Hello</b> Creative Code</p>

Questo è il classico esempio di elemento di linea! Come potete osservare, il tag <b> non intacca il normale flusso del paragrafo poiché esso è un elemento che va ad allinearsi con il resto del contenuto senza occupare l’intera area.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *