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...

Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Posición de la leyenda de las tablas
Siguiente
Cajas en bloque o en línea