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.
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.
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.
IMAGEN
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.
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 3px
- Borde superior de 3px
- margen superior 45px
- relleno superior de 16px
- 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+3+3+45+27 = 347px
De esta manera podemos considerar que la caja ocupa una altura total de 347PX.