Elementi inline-block Cross-Browser

Proprietà CSS Inline-Block Cross-Browser
Proprietà CSS Inline-Block Cross-Browser

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:

Caratteristiche e comportamenti di elementi inline

Le principlali caratteristiche di un elemento inline sono:

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.