Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (V)



10.5. Modelo de caja

En este vídeo explicamos el modelo de caja:Videotutorial

Los elementos de HTML están contenidos en cajas rectangulares. La etiqueta body es la caja principal dentro de la cual se van colocando las cajas de las etiquetas que se van creando, las cajas pueden estar unas dentro de otras, o unas al lado de otras, incluso se pueden superponer. Podemos pensar en el modelo de caja como un borde rectangular (border) que rodea al contenido, hay un margen interior que define la propiedad padding y un margen exterior que define la propiedad margin. Todo esto es lo que se conoce como modelo de cajas de CSS (box model) y es fundamental entenderlo bien para poder diseñar páginas web con soltura.

Vamos a explicarlo sobre este esquema:

Fusionar márgenes. CSS

Los componentes del modelo de caja son los siguientes:

a) Contenido. En cada caso este contenido es de un tipo, puede ser un texto, una imagen, una lista, otra caja, ... El contenido depende de cada etiqueta, por ejemplo, la etiqueta div admite varios tipos de contenido (texto, imágenes, otras etiquetas, ...) mientras que una etiqueta img sólo admite una imagen como contenido. En nuestro esquema el contenido está representado por el rectángulo gris.

b) Padding (margen interior). Espacio transparente entre el contenido y el borde. Puede ser de grosor cero. También podemos decir que el padding es el margen interior de la caja. En nuestro esquema el padding está representado por las dobles flechas azules.

c) Border (borde). Línea que rodea el padding, y por lo tanto también al contenido. Puede ser de grosor cero y por lo tanto invisible. En nuestro esquema el borde está representado por la línea punteada roja.

d) Margin (margen exterior). Espacio transparente rectangular que rodea al borde y sirve de separación con otros elementos adyacentes. Puede ser de grosor cero. En nuestro esquema el margin está representado por las doble flechas verdes.

Y aunque no son estrictamente del modelo de caja, también intervienen:

e) Background-image (Imagen de fondo). Algunos elementos como los contendores div y los párrafos p pueden tener una imagen de fondo que se coloca por detrás del contenido, hasta el borde. En nuestro esquema no hay imagen de fondo. Más adelante veremos un esquema que sí la tiene.

f) Background-color (Color de fondo). Si se define un color de fondo, este se coloca por detrás de la imagen de fondo, hasta el borde. En nuestro esquema no hay color de fondo.

Por otro lado, un poco más adelante, veremos cómo afecta el modelo de caja a las propiedades width (anchura) y height (altura).

Valores por defecto.

Por defecto, los rectángulos del modelo de caja son invisibles, por eso los hemos dibujado con líneas de puntos en el esquema anterior. Es decir, el atributo border tiene inicialmente valor cero, es invisible. Y el rectángulo que rodea al contenido lo hemos dibujado para explicar el modelo pero no existe como tal, no se puede dibujar. Por supuesto, tampoco tienen valor por defecto el color de fondo y la imagen de fondo.

Sin embargo los valores por defecto del margen y del padding no son siempre cero. Algunas etiquetas tienen establecidos unos valores por defecto. Estos valores dependen de los navegadores web, aunque son similares en la mayoría de los casos. Por ejemplo, la etiqueta párrafo p tiene unos valores de 1em para los márgenes superior e inferior, y un valor cero para los márgenes derecho e izquierdo. Esto tiene sentido porque si no fuese así, dos párrafos quedarían pegados entre sí, no habría diferencia entre un salto de línea y un párrafo. También tienen valores por defecto las otras etiquetas de bloque (div, h1, h2, ...)

Vamos a verlo con el siguiente ejemplo, en este primer caso no vamos a dar ningún valor al margin de los dos párrafos, así tomará el valor por defecto de 1em y los párrafos se verán correctamente (pondremos un borde a un contenedor exterior y un color de fondo blanco para distinguirlos mejor):

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem.

Párrafo dos. No hay diferencia entre un párrafo y el salto de línea. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem.

Y en este segundo caso vamos a dar el valor cero al margin de los dos párrafos:

<p style="margin: 0; background-color:white">

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem.

Párrafo dos. Ahora si hay diferencia entre un párrafo y el salto de línea. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem.

Como vemos, si el valor por defecto del margen fuese cero, no se mostrarían adecuadamente los párrafos.

Sin embargo, en otros casos lo correcto es no tener ningún valor por defecto en el margin, ni en el padding, por ejemplo, en los contenedores div no esperamos encontrar ningún margen por defecto.

El padding suele no tener valor por defecto en la mayoría de etiquetas.

El padding es siempre transparente, y deja ver la imagen de fondo y el color de fondo de su propia caja.

El margin es siempre transparente, y deja ver la imagen de fondo y el color de fondo de la caja que lo contiene.


Enero-2019 (V 2.01)
Pág. 10.5
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.