Modelo de cajas CSS. Ancho, altura, relleno, borde y margen

Modelo de cajas CSS. Ancho, altura, relleno, borde y margen

4.8
(4)

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.

width y height modelo de cajas
Diferencia de comportamiento de width y height en función de si es un elemento bloque (div) o un elemento en línea (a)

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.
expresiones padding abreviadas
De izquierda a derecha como escribir el padding y sus expresiones equivalentes abreviadas

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).
Ejemplo de uso de borders en CSS
Ejemplo de uso de borders en CSS

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 4.8 / 5. Votos: 4

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

2 Comments
  • oscar varon
    Posted at 12:21h, 28 septiembre Responder

    Interesante artículo: claro, preciso, sin rodeos y algrano.

  • Francesc Ricart
    Posted at 00:54h, 29 septiembre Responder

    ¡Muchas gracias!

Post A Comment