Modelo de cajas CSS

Anterior
Avanzar

El modelo de cajas en CSS es el tema que abordaremos en esta lección, conocerás qué es, en qué consiste y cómo funciona; pero lo más importante aquí es que aprendas y comprendas totalmente a utilizar el modelo de cajas para trabajar elementos HTML con CSS; además descubrirás sus aplicaciones y cómo este modelo hará que sueltes el potencial creativo que posees para diseñar elementos y páginas HTML altamente atractivos. ¿Listos? ¡Vamos a ello!

Qué es el modelos de cajas de CSS

Para entender el modelo, consideremos que todos los elementos HTML aprendidos en las lecciones del curso HTML están contenidas en cajas; es decir, para CSS cada elemento presente en una página HTML está dentro de una caja; de tal manera que elementos como títulos, párrafos, imágenes, listas, etc. están dentro de una caja en especial.

Representación gráfica del modelo de caja CSS

A continuación veremos una representación gráfica del modelo de cajas para entender mejor en que consiste, ya que ello será muy importante de ahora en adelante cuando hablemos de diseño:

Ahora te explicaré de que va este hermoso gráfico y así estarás feliz.

El bloque de color azul es un elemento HTML cualquiera, este elemento posee un relleno (verde), un borde (negro) y luego un margen (naranja), y claramente están diferenciados con colores.

Te recomendamos leer:  Propiedad display y visivility en CSS

Elementos del modelo de caja

  • Contenido.- Es el elemento HTML propiamente dicho.
  • Relleno.- Es el espacio que existe entre el borde y el contenido.
  • Borde.- Es una línea entre el relleno y el margen.
  • Margen.- define el espacio entre el borde del contenido y el elemento padre que lo contiene.

Gracias a CSS podemos establecer las dimensiones y otras características de cada componte de la caja, de tal manera que tenemos a disposición infinitas posibilidades de diseño, posicionamiento y en general estilo de elementos.

Ancho total de un elemento

Ahora que conocemos el modelo de caja de CSS, podemos decir que el ancho total de un elemento en realidad es la suma del ancho del contenido, el relleno, borde y margen, además hay que considerar tanto el lado derecho como el izquierdo el contenido, por lo tanto podemos matemáticamente podemos expresar que:

Ancho total de caja= A + RD+RI+BD+BI+MD+MI

Donde:

  • A= Ancho del contenido.
  • RD= relleno derecho
  • RI= relleno izquierdo
  • BD= borde derecho
  • BI= borde izquierdo
  • MD= margen derecho
  • MI= margen izquierdo

Cabe indicar que CSS nos permite establecer una dimensión diferente a cada lado.

Si las dimensiones son iguales a cada lado entonces podemos aplicar: Ancho de caja= A +2(R) + 2(B) +2(M)

Veamos la figura para entender mejor:

Calcular el ancho total de la caja

Calcular el ancho total de la caja que contiene una imagen de 300 px 400 px de ancho, con un relleno de 30 px, un borde de 1.5px y un margen de 27px.

Ancho total de caja=400+30+30+1.5+1.5+27+27 = 517px

517PX es el ancho que realmente ocupará dicho elemento.

Altura total de un elemento

Lo mismo ocurre con la altura total de caja, en este caso será la suma de la altura del elemento propiamente dicho, el relleno superior e inferior, el borde superior e inferior y el margen superior e inferior.

Te recomendamos leer:  Estilo para listas en CSS

Como lo hicimos en el caso anterior expresemos matemáticamente:

Altura total de caja= H+RS+RI+BS+BI+MS+MI

  • H= altura de contenido propiamente dicho.
  • RS= relleno superior
  • RI= relleno inferior
  • BS= borde superior
  • BI=borde inferior
  • MS= margen superior
  • MI=margen inferior

De la misma manera, cada uno de los componentes mencionados pueden ser medidos independiente, de hecho veremos un ejemplo en el que tienen variedad de medidas diferentes.

Calcular la altura total de la caja

Calcular la altura total de la caja que contiene una imagen con ancho de 300px y altura de 240px que posee las siguientes características.

  • Borde inferior de 1px
  • Borde superior de 2px
  • margen superior 45px
  • relleno superior de 16 px
  • margen inferior de 27px
  • relleno inferior de 13px

Por lo tanto la altura total lo calculamos de la siguiente manera:

Altura total de caja= 240+16+13+2+1+45+27 = 344px

De esta manera podemos considerar que la caja ocupa una altura total de 344PX.

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos