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ù comuni elementi di bloco sono:
div,h1....h6,table,p,ol,ulecc...
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à
floatsi 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,imgstrongecc...
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.
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.