Secció 4: Posicionament CSS

1. El CSS Box Model revisat

1.2. Bloc contenidor

Les dimensions i la posició d'una caixa es calculen a partir d'una àrea rectangular anomenada bloc contenidor (containing block). Aquest bloc contenidor l'estableixen els seus elements avantpassats, i correspon concretament a l'àrea de contingut de l'element de bloc avantpassat més proper.

Nota 1: El concepte d'element de bloc el vàrem veure a la Secció 0 apartat 4, i el tractarem amb més detall al capítol vinent.

Nota 2: Aquesta definició no és precisa en el cas d'elements posicionats de forma absoluta, però ja en parlarem en el seu moment.

Ho veurem més clar amb un exemple.

<DIV>
<H1>Exemple de blocs contenidors</H1>
<P>Aquest <EM>exemple</EM> il·lustra
el concepte de bloc contenidor.</P>
</DIV>

D'acord amb el què hem explicat abans, els elements H1 i P tenen el mateix bloc contenidor, que coincideix amb l'àrea de contingut de l'element DIV. L'element EM té com a bloc contenidor l'àrea de contingut de l'element P. A sota es mostra el resultat amb els blocs contenidors comentats indicats per una vora puntejada.

El concepte de bloc contenidor ja va ser apuntat a la Secció 3 apartat 4.4: 'Propietats Margin' quan parlàvem dels valors de percentatge, i prendrà especial relevància quan tractem les dimensions de les caixes a l'apartat 3.