Extrowebsite

Prima di enterare nel merito dell'articolo, credo sarebbe bene stabilire le differenze tra gli elementi di blocco (block elements) e gli elementi in linea (inline elements). Comprendere questi concetti, rende di facile apprendimento il comportamento della proprietà CSS display: inline-block.

Caratteristiche e comportamenti di elementi di blocco

Le principlali caratteristiche di un elemento block sono:

  • Un elemento di blocco necessita l'attribuzione della larghezza mediante la proprietà width. Altrimenti l'elemento si estenderà per tutta la larghezza dell'elemento contenitore
  • Inserendo due o più elementi di blocco nel documento html, questi si disporranno uno sotto l'altro anche se la loro larghezza è inferiore a quella dell'elemento contenitore. Nel caso volessimo elementi di blocco affiancati, di deve ricorrere alla proprietà float
  • Ad un elemento di blocco è possibile assegnare altezza, larghezza, margini e padding
  • Un elemento di blocco può contenere altri elementi di blocco o elementi inline
  • Ad un elemento di blocco non è possibile assegnare la proprietà vertical-align
  • Molti elementi di blocco sono separati dalla proprietà margin. Questo margine dipende dall'elemento e dal browser in uso
  • I più comini elementi di bloco sono: div, h1....h6, table, p, ol, ul ecc...

Caratteristiche e comportamenti di elementi inline

Le principlali caratteristiche di un elemento inline sono:

  • Un elemento inline non interrompe il normale flusso della pagina andando su una nuova riga e si dispone in linea rispetto al contenuto in un elemento
  • Due elementi inline si dispongono uno accanto all'altro
  • Un elemento inline nativamente non ha margini e padding. E' dotato di larghezza e altezza tali da comprendere il suo contenuto
  • Attraverso i CSS non è possibile modificare altezza e larghezza di un elemento inline, ma possiamo modificare padding, margini e bordi
  • Con la proprietà float si può trasformare un elemento inline in un elemento di blocco
  • Un elemento inline può contenere solo altri elementi inline
  • Ad un elemento inline è possibile attribuire proprietà vertical-align.
  • I più comuni elementi in linea sono: span, a, img strong ecc...

La proprietà inline-block, assegna un comportamento di tipo "inline" ad elementi di tipo "block" come, per esempio, il comportamento di default delle immagini.

Rispetto ad elementi di tipo "block" resi "flottanti", la proprietà "inline-block" consente un comportamento "normale", vale a dire che l'elemento viene allineato rispetto alla propria interlinea, così come effettivamente dovrebbe essere, nonostante gli elementi abbiano una altezza differente (un elemento di blocco con proprietà float eccede in altezza, superando la propria interlinea).

Così come possiamo assegnare dimensioni agli elementi inline, allo stesso modo possiamo disporre sulla stessa linea gli elementi di blocco. Come è noto, non è possibile settare delle dimensioni ad elementi in linea senza trasformarli in elementi blocco tramite display: block, oppure disporre in linea dei div tramite display: inline e poi attribuire a questi elementi delle dimensioni.

Con display: inline-block tutto quanto appena detto diventa possibile perchè ci si ritrova con elementi inline e blocco tutti affiancati (comportamento tipico di un elemento inline), ma facilmente dimensionabili (comportamento tipico di un elemento di blocco).

Di seguito due immagini per comprendere meglio. La prima ha elementi con altezze diverse e proprietà display-block. La seconda elementi con altezze diverse e proprietà float.

Immagini con proprietà display-block
Immagini con proprietà display-block


Immagini con proprietà float
Comportamento errato con elementi flottanti

Si noti come la propietà inline-block offra tutti i vantaggi del caso.

Il codice CSS

   
li {         
width: 200px;            
min-height: 250px;            
border: 1px solid #000;       
display: inline-block;           
margin: 5px;        
} 

La proprietà è stata applicata agli elementi di un elenco e potrebbe esserci bisogno di qualche modifica.