HTML and CSS Reference
In-Depth Information
Quando la proprietà CSS
display
viene impostata su
block
, l'elemento viene rende-
rizzato come un blocco unico e non accetta altri elementi, né a destra, né a sinistra. Questa
modalità di visualizzazione è in piena contrapposizione con la modalità inline, in quanto
il fatto di non accettare elementi né a destra, né a sinistra non permette di avere elementi
uno accanto all'altro e quindi elimina anche eventuali problemi legati alla renderizzazione
dell'elemento stesso in più blocchi.
Se, per esempio, abbiamo due elementi con la proprietà CSS
display
impostata a
block
, questi vengono mostrati uno sotto l'altro, così come mostrato nella
figura 5.11
.
Figura 5.11
- I due elementi con
display
valorizzato con
block
vengono renderizzati
l'uno sotto l'altro.
nota
Alcuni elementi come
div
,
p
,
ul
,
ol
e
li
sono renderizzati automaticamente
come blocchi, quindi per questi elementi non dobbiamo impostare la proprietà
CSS
display
con
block
.
La modalità di visualizzazione a blocco è comoda quando vogliamo che l'elemento non
venga diviso in più blocchi. Tuttavia, questa modalità presenta l'inconveniente di non per-
mettere di avere due elementi uno di fianco all'altro. Nel capitolo precedente abbiamo visto
come utilizzando la proprietà CSS
float
possiamo raggiungere questo scopo, ma a par-
tire da CSS3, abbiamo a disposizione un nuovo valore della proprietà CSS
display
che
offre una maggior versatilità:
inline-block
.
inline-block
Un elemento che ha la proprietà CSS
display
impostata a
inline-block
viene mo-
strato di seguito all'elemento precedente (come nella modalità inline), ma non può suddi-
vidersi in più blocchi (come nella modalità a blocchi). Se l'elemento supera il bordo del
contenitore, allora viene visualizzato al di sotto degli elementi precedenti. La
figura 5.12
mostra chiaramente la disposizione degli elementi.
