HTML and CSS Reference
In-Depth Information
Quando la proprietà CSS
display
viene impostata su
inline
, l'elemento viene rende-
rizzato accanto a quello precedente. Nella
figura 5.9
possiamo vedere due elementi rende-
rizzati inline.
Figura 5.9
- I due elementi con
display
valorizzato con
inline
vengono renderizzati
l'uno di seguito all'altro.
Un elemento renderizzato inline può essere separato in più blocchi. Supponiamo di avere
un elemento contenitore che abbia una larghezza di 400 pixel. All'interno di questo conte-
nitore ci sono due elementi visualizzati inline dove il primo ha una larghezza di 350 pixel e
il secondo di 200 pixel. Quello che succede in questo caso è che i primi 50 pixel del secon-
do elemento vengono renderizzati accanto al primo elemento, mentre i restanti 150 pixel
vengono visualizzati sotto il primo elemento, come se fossimo andati a capo con un tag
br
.
La
figura 5.10
mostra visivamente questo esempio.
Figura 5.10
- L'elemento contenitore ha il bordo più scuro. Il secondo elemento inline
viene visualizzato in parte sulla prima riga e in parte sulla seconda, andando a capo.
nota
Alcuni elementi vengono automaticamente renderizzati inline, quindi non abbia-
mo bisogno di impostare la proprietà
display
su
inline
. Tra questi elementi,
i più usati sono i tag
input
,
select
,
span
e
label
.
La modalità di rendering inline è sicuramente comoda, ma il fatto che un elemento possa
essere suddiviso in più blocchi può rappresentare un problema. Vedremo nella prossima se-
zione come superare il problema.
block
