“Elementi Block “e “elementi inline”

3 modalità di visualizzazione per gli elementi HTML

Di default, gli elementi HTML sono visualizzati in una delle seguenti modalità:

1- Block / blocco

elementi sovrappostiOccupa l’intera larghezza disponibile. Quando 2 elementi di blocco si susseguono in una pagina, sono posizionati (di default) uno sotto l’altro.

Esempio tipico di un elemento di blocco: l’elemento<p> (il paragrafo).

2- In linea / inline

elementi affiancati Occupa solo la larghezza necessaria per visualizzare il contenuto e non causa interruzioni di riga. Quando 2 elementi in linea si susseguono in una pagina, sono posizionati uno accanto all’altro (se la larghezza della pagina lo permette).

Esempio tipico di un elemento in linea: l’elemento<img> (immagine).

3- Invisibile / notdisplayed

elemento invisibileAlcuni elementi sono usati solo per fornire informazioni invisibili all’utente web.

Esempio tipico di un elemento not-displayed: l’elemento <meta>.

Ruolo degli elementi più comuni

Gli elementi “Block” sono generalmente quelli utilizzati per l’impaginazione, mentre gli elementi “inline” sono per lo più utilizzati per assegnare lo stile a una porzione di testo.

Qui ci sono alcuni elementi di blocco che potrebbero esservi familiari:

  • <div>: multipurposetag. Questo tag è spesso usato per posizionare il contenuto all’interno della pagina.
  • <h1><h6>: inquadra un titolo o un sottotitolo.
  • <p>: paragrafo.
  • <ul><ol><dl> : Liste (non ordinate, ordinate o con definizione).
  • <li><dt><dd>: Voce della lista, definizione e titolo della definizione.
  • <table> :table.
  • <blockquote> :paragrafo indentato (spostato a destra) normalmente usato per presentare una citazione.
  • <pre> :blocco di decodifica preformattato.
  • <form> :input form.

E qui ci sono alcuni elementi in linea che potresti aver già usato:

  • <span> : markup multiuso, molto comodo per applicare uno stile CSS a una porzione di testo, per esempio.
  • <a>: ancora, permette di creare un link in uscita o permette di specificare un punto specifico della pagina verso cui si vuole dirigere un link.
  • <strong>: usato per marcare la particolare importanza di una porzione di testo. Tutti i browser attuali visualizzeranno questa parte in grassetto. NOTA: il vecchio tag <b> (grassetto) è obsoleto e non dovrebbe più essere usato.
  • <em>: usato per sottolineare l’importanza di una porzione di testo (meno fortemente di <strong>). Tutti i browser attuali visualizzeranno questa parte in corsivo. NOTA: il vecchio tag <i> (corsivo) è obsoleto e non dovrebbe più essere usato.
  • <img>: immagine, permette di mettere un’immagine in mezzo al flusso di testo.
  • <br>: interruzione di linea. Questo è un caso molto speciale di elemento inline, che causa un’interruzione di linea. Nonostante questa peculiarità,<br> non è assolutamente un blocco e dovrebbe essere classificato come un elemento in linea.
  • <input>: campi di input in un modulo, come o
  • <abbr>: segnala un’abbreviazione (mettici sopra il cursore per vedere come funziona). Nota: Internet Explorer non supporta questo tag nelle versioni precedenti alla versione 7.

Nidificazione di elementi di blocco e in linea

In generale, un elemento in linea può annidarsi in un elemento di blocco, mentre non è vero il contrario.

Allowed nesting:

<p>
Phrase avec un <strong> mot</strong> important
</p>

INTERDIT nesting:

<strong>
<p>Première phrase</p>
<p>Deuxième phrase</p>
</strong>

Questo ultimo esempio probabilmente funziona in alcuni browser, ma non è conforme alle convenzioni riguardanti la nidificazione degli elementi e non dovrebbe essere usato nelle vostre pagine.

Si può, tuttavia, annidare un elemento di blocco all’interno di un altro elemento di blocco o un elemento inline dentro un altro elemento inline senza alcun problema.

Queste regole generali hanno alcune eccezioni, una lista delle quali può essere trovata su alsacreations.

Cambiare il modo di visualizzazione di un elemento

A volte può essere abbastanza conveniente (anche essenziale!) cambiare il modo in cui un elemento viene visualizzato.

La proprietà CSS “display “permette di passare da una modalità di visualizzazione all’altra molto semplicemente scrivendo :

display:block
display:inline
ou
display:none

Come esempio, ecco come visualizzare e gestire un link (elemento inline <a>) in forma di blocco:

Codice:

<a href="bloc-en-ligne.php" style="background-color:#FFCCCC;display:block;">
<img src="images/blocs-lignes.gif" alt="">
Exemple de lien
</a>

Risultato:

Esempio di link

Ecco come sarebbe questo link senza la proprietà "display:block":

Esempio di link

Nota importante: mentre la proprietà “display” permette di cambiare il modo in cui un elemento viene visualizzato sullo schermo, non cambia in alcun modo la sua natura effettiva. Gli elementi “Block” non possono essere annidati dentro elementi “inline”, anche se avete cambiato le loro proprietà di visualizzazione!

Proprietà CSS riservate agli elementi “block”

In generale, la maggior parte delle proprietà CSS volte a posizionare un elemento nella pagina sono riservate agli elementi “block “o aventi la proprietà “display:block”.

Questo è per esempio il caso delle seguenti proprietà:

  • position(static, absolute, relative, fixed): permette di definire come un elemento si posiziona rispetto ad altri elementi della pagina.
  • left, top,right,bottom :posiziona i lati degli elementi.

Casi (un po’) speciali

1- Posizionamento degli elementi in linea

Come abbiamo appena visto nel capitolo precedente, la proprietà “position” non può essere applicata a un elemento in linea. Tuttavia, possiamo posizionare questo tipo di elemento usando la proprietà “float”.

Questa proprietà ci permette di posizionare qualsiasi tipo di elemento sul lato sinistro (float:left;)o destro (float:right;)di un blocco di testo, per esempio. L’immagine che questo paragrafo contiene è posizionata usando un “float:left”.Per saperne di più su come usare questa proprietà, vedi la nostra pagina intitolata Layout con i CSS.

2- Altezza e larghezza per elementi in linea

In generale, gli elementi in linea non hanno una larghezza o altezza predefinita. È il loro contenuto che determinerà questi valori.

Così si sarebbe tentati di pensare che questi tag non possono avere una proprietà di larghezza o altezza.

Tuttavia, ci sono alcuni tag inline che hanno un significato. Questi sono:

  • <img>
  • <input>
  • <textarea>
  • <select>
  • <object>

che sono chiamati elementi “sostituiti” o “replaced”,a seconda della traduzione.

3- Cornici e margini per elementi in linea

Gli elementi in linea possono essere perfettamente dotati di margini interni ed esterni (padding e margin), così come di bordi (border) o di uno sfondo (background).

Contrariamente a quanto si potrebbe pensare, un elemento in linea può quindi avere l’aspetto di una “scatola”.

Esempio:

<p>Exemple de mot <span style="border-style:solid;border-width:2px"> encadré</span></p>

Risultato:

Esempio di una parola in scatola

Lascia un commento

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