Differenza tra elementi block e inline

Wednesday 27 August 08 by Onsitus in CSS Tips

Nel creare pagine HTML è importante differenziare le due categorie di elementi block e inline per evitare errore di codice ed impostare al meglio il CSS.

La traduzione delle parole inglese ‘block’ e ‘inline’ sono abbastanza esplicite.

  • block: un elemento che forma un blocco separato
  • inline: un elemento che rimane in linea con il resto del contenuto

Elemento di block

Un elemento di block ha le seguente caratteristiche:

  • Forma un blocco e si dispone verticalmente sotto con una nuova linea vuota sotto e sopra
  • Prende tutta la larghezza disponibile in rapporto alle misure del suo contenitore
  • La sua altezza cambia in rapporto al suo contenuto
  • Può contenere certi altri elementi di tipo block e/o inline (es: un <p> dentro un <div>)
  • Con i css, possiamo impostare misure fisse con le sue proprietà width(larghezza) e height(altezza)
  • Esempio di elementi HTML di block: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>

Elemento inline

Un elemento inline ha le seguente caratteristiche:

  • Si dispone orizzontalmente in linea con il contenuto del suo contenitore
  • Prende la larghezza e altezza minimale in rapporto al suo contenuto
  • Può contenere altri elementi SOLO di tipo inline (es: un <img/> dentro un <a>)
  • Con i css, NON li possiamo impostare misure fisse
  • Esempio di elementi HTML inline: <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>

Grazie alle proprietà display:block; e display:inline; possiamo cambiare un elemento di block in un elemento inline e vice versa.

Per maggiore informazione sulla proprietà css display, leggete questo articolo.

Esempi concreti di block e inline

1. Un paragrafo (elemento di blocco <p>) al suo stato naturale

La mia larghezza eguale quella del mio contenitore, l’altezza eguale quella del mio contenuto.

2. Un paragrafo a misure fisse

La mia larghezza eguale 300px (width:300px;), l’altezza eguale quella 100px (height:100px;).

3. Un paragrafo convertito in un elemento inline con display:inline;

Sono diventato un elemento inline. La mia larghezza e altezza sono minimale in rapporto al mio contenuto.

4. Un link (elemento inline <a>) al suo stato naturale

La mia altezza e altezza sono minimale.

5. Un link con misure fisse (tanto per dimostrare che non funziona)

Non potete impostarmi una larghezza(width) e altezza(height).

NB: Internet Explorer 6/7 applica queste misure fisse per errore di interpretazione delle specifiche css. Non dovrebbe essere il caso!!!
Se dovete, impostare misure fisse ad un elemento inline, aggiungere prima il display:block;

6. Un link convertito in un elemento di block con display:block;

Sono diventato un elemento di block.

La mia larghezza eguale quella del mio contenitore,

l’altezza eguale quella del mio contenuto.

This article in english >>

10 commenti

Rimani aggiornato con il RSS Feed

Previous post: z-index: cambiare la profondità degli elementi

Next post: Folder icon menu - esempio 4