All Free <Script>

7 Aprile 2015

Molti non hanno ben chiara la differenza che passa tra questi due elementi, ed è spesso causa di errori di codifica di html e css. Vediamo allora le differenze sostanziali.
Cominciamo col dire che un elemento block-level può contenere altri elementi block-level e anche elementi inline, mentre un elemento inline può contenere solo altri elementi inline.
Ad un elemento block-level si possono attribuire delle dimensioni. Ad un elemento inline, a meno che questo non venga dichiarato float, posizionato o modificandone la sua natura con la proprietà display, non si possono attribuire delle dimensioni (in realtà un elemento inline può avere solo una sorta di “dimensione verticale” grazie alla proprietà line-height.
La disposizione verticale di elementi inline con la proprietà line-height impostata rispetto ad altri elementi inline adiacenti e/o contenitori si controlla grazie alla proprietà vertical-align).
Elementi inline adiacenti vengono disposti orizzontalmente, mentre elementi block-level vengono disposti verticalmente.
Un elemento block level di dimensioni non specificate occupa tra margini, bordi, padding e contenuto, tutta la larghezza messa a disposizione del suo box contenitore. In verticale occuperà l’altezza necessaria al suo contenuto.
Un elemento inline occuperà sia in orizzontale che in verticale l’ altezza necessaria al suo contenuto.