A parte i ; che appunto non ci vogliono, tieni presente che:
i div di default hanno display: block; il che significa che:
0) Non si affiancheranno mai a nulla, ma useranno sempre una intera riga per se stessi
1) Sono di default larghi il 100% dello spazio a loro disposizione (ovvero dello spazio interno del loro container)
2) Sono di default alti 0 (ZERO) quindi se non hanno contenuto sono invisibili, altrimenti sono alti abbastanza da contenere il loro contenuto non floated (i contenuti floated non contribuiscono MAI alle dimensioni del contenitore).
I block element se gli applichi una larghezza ed altezza la prendono, ma questo non cambia il loro comportamento, continueranno ad usare una intera linea e se necessario troncheranno (o lasceranno debordare) il contenuto a seconda di come imposti la loro proprità overflow.
Al contrario, gli elementi inline saranno sempre larghi e alti quanto basta per contenere il loro contenuto, IGNORERANNO qualsiasi larghezza o altezza impostategli, e si impileranno sulla stessa riga finchè ci stanno, per poi proseguire nella successiva; SPAN è un tag che di default è inline.
Di per se, quindi, l'unica vera dipendenza che hanno le dimensioni è legata al fatto che alcuni display hanno dimensioni di default o obbligate legate al contenuto, altri no; diverso è il discorso di dell'ereditarietà, che significa che per esempio se imposti un color su un contenitore di default i figli hanno lo stesso color.
Un ibrido interessante è inline-block, che si impila sulla riga e di default è grande come il suo contenuto come l'inline, ma ha dimensioni impostabili.
Se poi vuoi divertirti con la potenza dei CSS moderni, sperimenta con display:flex impostato al contenitore, è MOLTO potente!
Poi ho notato un'altra cosa, non so se sia il formattatore di codice qui nel forum, ma di sicuro non è corretto <divid="a"> ma invece ci vuole uno spazio <div id="a">!
Rispondi quotando