1. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Seminario
HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJAS
Facilitadora:
María Zeballos

2. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJAS
Antes de estudiar las propiedades CSS que
controlan el aspecto de la página web, debe
saber que todos los elementos HTML se
representan por cajas rectangulares, cuyas
propiedades y representación visual se pueden
controlar con CSS, mediante la definición de la
altura, anchura, margen y relleno interior de
cada caja; así como también de la forma cómo se
visualizan las cajas.

3. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJAS
Cada una de las cajas está formada
por las siguientes partes:
Margen superior
Margen inferior
Borde superior
Borde inferior
Relleno superior
Relleno inferior
Contenido
Margenderecho
Bordederecho
Rellenoderecho
Margenizquierdo
Bordeizquierdo
Rellenoizq.
• Margen (margin).
• Borde (border).
• Color de fondo (background-color).
• Imagen de fondo (background-image
• Relleno (padding).
• Contenido.
La ilustración puede ayudarle a comprender los componentes de una caja.

4. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJAS
Cada una de las cajas está formada
por las siguientes partes:
Margen superior
Margen inferior
Borde superior
Borde inferior
Relleno superior
Relleno inferior
Contenido
Margenderecho
Bordederecho
Rellenoderecho
Margenizquierdo
Bordeizquierdo
Rellenoizq.
• Margen (margin).
Es el espacio libre entre la caja y las posibles cajas
adyacentes. Es transparente, dejando visualizar el
color o imagen de fondo que tenga definido el
elemento padre.
La ilustración puede ayudarle a comprender los componentes de una caja.

5. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJAS
Cada una de las cajas está formada
por las siguientes partes:
Margen superior
Margen inferior
Borde superior
Borde inferior
Relleno superior
Relleno inferior
Contenido
Margenderecho
Bordederecho
Rellenoderecho
Margenizquierdo
Bordeizquierdo
Rellenoizq.
• Borde (border.
Es la línea que encierra completamente el contenido y
su relleno; casi siempre se mantiene transparente al
usuario.
La ilustración puede ayudarle a comprender los componentes de una caja.

6. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJAS
Cada una de las cajas está formada
por las siguientes partes:
Margen superior
Margen inferior
Borde superior
Borde inferior
Relleno superior
Relleno inferior
Contenido
Margenderecho
Bordederecho
Rellenoderecho
Margenizquierdo
Bordeizquierdo
Rellenoizq.
• Color de fondo (background-color).
Es el color que rellena el espacio ocupado por el
contenido y su posible relleno.
La ilustración puede ayudarle a comprender los componentes de una caja.

7. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJAS
Cada una de las cajas está formada
por las siguientes partes:
Margen superior
Margen inferior
Borde superior
Borde inferior
Relleno superior
Relleno inferior
Contenido
Margenderecho
Bordederecho
Rellenoderecho
Margenizquierdo
Bordeizquierdo
Rellenoizq.
• Imagen de fondo
(background-image
Es la imagen que se muestra por debajo del contenido,
teniendo prioridad con respecto al color de fondo.
La ilustración puede ayudarle a comprender los componentes de una caja.

8. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJAS
Cada una de las cajas está formada
por las siguientes partes:
Margen superior
Margen inferior
Borde superior
Borde inferior
Relleno superior
Relleno inferior
Contenido
Margenderecho
Bordederecho
Rellenoderecho
Margenizquierdo
Bordeizquierdo
Rellenoizq.
• Relleno (padding).
Está formado por el espacio libre entre el contenido y
el borde que lo encierra. Es transparente, por lo que
se ve el color o imagen de fondo que esté definido.
La ilustración puede ayudarle a comprender los componentes de una caja.

9. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MODELO DE CAJAS
Cada una de las cajas está formada
por las siguientes partes:
Margen superior
Margen inferior
Borde superior
Borde inferior
Relleno superior
Relleno inferior
Contenido
Margenderecho
Bordederecho
Rellenoderecho
Margenizquierdo
Bordeizquierdo
Rellenoizq.
• Contenido.
Es el contenido del elemento: una palabra de un
<strong>, una frase de un <h1>, las palabras de un
párrafo, una imagen, etc.
La ilustración puede ayudarle a comprender los componentes de una caja.