Secció 4: Posicionament CSS

2. Tipus de caixes

2.1. Elements de bloc. Elements inline

Ja sabem que cada element HTML genera una caixa. Parlarem ara dels diferents tipus de caixa que es poden generar i de com afecten a la seva visualització en els navegadors.

Vàrem introduir el concepte d'element de bloc i element inline a la introducció del curs (Secció 0 apartat 4). Els elements de bloc generen caixes de bloc (bloc boxes) que ocupen tot l'espai horitzontal disponible i es situen a sota de l'anterior caixa de bloc. A més, les caixes de bloc estableixen el bloc contenidor per a les caixes descendents, és a dir, aquelles que generen els seus elements descendents.

Els elements inline generen caixes inline (inline boxes) que s'adapten a l'amplada del contingut i es situen a la mateixa líina que l'anterior caixa inline. Les caixes inline no estableixen el bloc contenidor per als seus descendents.

Existeixen altres tipus de caixa, com veurem de seguida, però el seu comportament és anàleg al de les caixes de bloc o les caixes inline. Donat que el seu ús es limita a situacions molt especials no els tractarem en aquest curs per tal de no complicar excessivament les coses.