Índice

Concepto de modelo de caja o bloque

El elemento caja es una noción importante en CSS. Es preciso captar bien esta noción, algo abstracta, para continuar con nuestro estudio y, en particular, para comprender el posicionamiento (capítulo Maquetación de las cajas - Posicionamiento de las cajas).

Este elemento caja también se llama contenedor o bloque (block).

El W3C define un elemento caja como una zona rectangular constituida por:

- un contenido,

- un margen interior (padding),

- un borde (border),

- y un margen exterior (margin).

images/boite1.PNG

Precisemos que:

  • El contenido puede ser, por ejemplo, el texto de un párrafo.

  • Está rodeado por un espacio en torno al texto hasta los bordes del cuadro, que llamaremos margen interior o interno.

  • A continuación están los bordes del cuadro (opcionales).

  • Por último existe un espacio que envuelve todo el conjunto, llamado margen exterior o externo.

Las hojas de estilo extienden esta noción de caja y proporcionan al diseñador un control total sobre los márgenes interior y exterior, así como del borde.

Con las hojas de estilo CSS podremos, por ejemplo, regular de forma independiente:

  • Los cuatro márgenes exteriores en cualquier sentido.

  • Los cuatro bordes (dimensión, estilo, color).

  • Los cuatro márgenes interiores en cualquier sentido.

  • Las dimensiones (anchura y altura) del contenido.

La principal fuente de confusión es que, tras haber precisado la anchura o la altura del contenido, no se ha definido de forma explícita la dimensión ...