28 Ago Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
Para entender el modelo de cajas de CSS lo más fácil es pensar un símil en el mundo real.
Por ejemplo una persona tiene una altura, se viste, ocupa una superficie … y le gusta que en un ascensor no le toquen.
En CSS se define un modelo de cajas que permite a las etiquetas html que se encuentran dentro del <body> tener también unas «propiedades físicas» similares.
De este modo en CSS definimos un ancho, una altura, un relleno, un borde, un margen…
El conjunto de todas estas propiedades traducidas a lenguaje de estilos es lo que conforma el modelo de cajas.
Se puede definir y «decorar» cualquier caja.
Veamos como ejemplo el modo como chrome representa por consola del navegador (Ctrl + inspeccionar) una caja de una página web.
Width, height
El width y el height hacen referencia a la altura y al ancho de una caja html.
Como apuntes de clase considera los siguientes factores importantes:
- Todos los navegadores tienen definido un width y un height por defecto para todas las etiquetas mientras no se indique en la hoja de estilos el valor de width o height.
- Los elementos en línea no hacen caso del width ni el height que hayas podido indicar en la hoja de estilos. Para que lo hagan hay que transformarlos a elementos bloque o a elementos inline-block.
- Los elementos bloque o inline-block si respetan lo que escribamos como width y/o height en una hoja de estilos css.
- Se pueden definir mediante unidades relativas. En caso de usar un porcentaje (%) se toma como unidad absoluta la caja contenedora. Por ejemplo, una caja de ancho 100% ocupará todo el espacio disponible dentro de su contenedor. En última instancia este espacio es todo el ancho del documento web. (<body>).
Padding (relleno)
Si se tratara de una caja de zapatos el padding es la distancia entre los zapatos y las paredes de cartón.
- Tenemos un padding superior (padding-top), derecho (padding-right), inferior (padding-bottom) e izquierdo (padding-left).
- Existen distintas formas de escribir los paddings en una hoja de estilos. Se muestran en la imagen a continuación junto con sus equivalentes abreviados.
border (borde)
Siguiendo con el símil de la caja de zapatos, el border es el grosor que tienen las paredes de cartón.
- Existe un borde superior, derecho, inferior y izquierdo.
- Para un borde se puede definir el grosor (border-width), el color (border-color) y el trazado (border-style).
- Personalmente no me gusta complicarme demasiado la vida con estos aspectos pero conviene conocerlos.
- Para definir sus propiedades aplica exactamente la misma lógica que con el padding (sustituyendo la palabra padding por border y todo el resto igual).
Margin (separación)
Si estás en un ascensor puedes estar muy pegado o muy ancho. Esto es el margen.
Aplicado a una caja html es la distancia entre cajas desde el borde. Es decir, el espacio que queda entre cajas antes de tocarse.
Señalar como importantes los siguientes apuntes de clase:
- Existe el margin superior, derecho, inferior e izquierdo.
- Los elementos bloque si respetan todos los márgenes que hayamos podido indicar. Pero atención, los márgenes inferior y superior de dos cajas una encima de la otra se fusionan.
- Los elementos en línea no respetan el margen superior ni inferior. Pero si el izquierdo y el derecho.
- Existen distintas formas de escribir los margin en una hoja de estilos. Aplica exactamente la misma lógica que con el padding (sustituyendo la palabra padding por margin y todo el resto igual)
Background (fondo)
Debemos pensar en una caja como un objeto en 2 dimensiones con varias capas superpuestas.
El fondo es la última de las capas de una caja.
Podemos definir una imagen, un color, una posición dentro de la caja, si se repite o no, …
En esta publicación se trata background en profundidad.
Outline (pseudo-border)
Outline es un tipo especial de borde que no afecta a las dimensiones de una ancha.
Es una propiedad meramente estética que no tiene grosor ni ancho.
Personalmente no la utilizo mucho.
Dar un vistazo a este enlace de w3schools.
Mi chuleta de instrucciones CSS para el modelo de cajas
/*
width
height
padding (expresión minificada)
padding-top
padding-right
padding-bottom
padding-left
margin (expresión minificada)
margin-top
margin-right
margin-bottom
margin-left
style, color, width
border (expresión minificada)
border-top
border-right
border-bottom
border-left
border-width (expresión minificada)
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style (expresión minificada)
border-top-style
border-right-style
border-bottom-style
border-left-style
border-color (expresión minificada)
border-top-color
border-right-color
border-bottom-color
border-left-color
*/Y hasta aquí una entrada extensa en la que hemos repasado muy resumidamente el concepto de modelo de cajas de CSS.
Para cada una de las propiedades podemos profundizar un poco viendo ejemplos. Ahora es cuestión de coger el sublime o el brackets y empezar a teclear y testear.
Espero que os pueda ser de utilidad el repaso.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
oscar varon
Posted at 12:21h, 28 septiembreInteresante artículo: claro, preciso, sin rodeos y algrano.
Francesc Ricart
Posted at 00:54h, 29 septiembre¡Muchas gracias!