Modelo de Caja CSS

Introducción

¡Bienvenido al laboratorio del Modelo de Caja CSS! En el diseño web, cada elemento HTML puede considerarse como una caja. El Modelo de Caja CSS es un concepto fundamental que describe cómo se renderizan estas cajas en una página web. Consta de cuatro partes principales: el área de contenido, el padding (relleno), el border (borde) y el margin (margen).

En este laboratorio, aprenderás a manipular cada uno de estos componentes para controlar el tamaño y el espaciado de los elementos. Trabajaremos con un archivo index.html y un archivo style.css. Todos tus cambios se realizarán en el archivo style.css, y podrás ver los resultados al instante cambiando a la pestaña Web 8080 en la interfaz de LabEx.

¡Empecemos!

Establecer la propiedad width en un elemento div

En este paso, comenzaremos definiendo el tamaño del área de contenido de nuestro elemento. La propiedad width en CSS establece el ancho de la caja de contenido de un elemento. Los otros componentes del modelo de caja (padding, border, margin) se añadirán alrededor de esta área de contenido.

Primero, localiza el archivo style.css en el explorador de archivos en el lado izquierdo del WebIDE. Haz clic en él para abrirlo en el editor.

Ahora, añade la siguiente regla CSS al archivo style.css. Esta regla apunta al elemento div con la clase box y establece su ancho a 300 píxeles.

.box {
  width: 300px;
}

Después de añadir el código, guarda el archivo (Ctrl+S o Cmd+S). Para ver el efecto, haz clic en la pestaña Web 8080. Notarás que el texto dentro de la caja ahora se ajusta para caber dentro de un contenedor de 300 píxeles de ancho.

Aplicar la propiedad padding con valores uniformes

En este paso, añadiremos un espacio entre el contenido y el borde del elemento. Este espacio se llama padding (relleno). La propiedad padding limpia un área alrededor del contenido. Está dentro del borde del elemento.

Añadamos 20 píxeles de padding a los cuatro lados de nuestra caja. Modifica la regla .box existente en tu archivo style.css para incluir la propiedad padding.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue; /* Añadido para una mejor visualización */
}

También hemos añadido un background-color para hacer las áreas de contenido y padding más visibles. Guarda el archivo y cambia a la pestaña Web 8080. Verás que ahora hay un espacio azul claro de 20 píxeles rodeando el contenido de texto dentro de la caja. Observa que el ancho visible total de la caja ha aumentado, ya que el padding se añade encima del ancho del contenido.

Usar la propiedad border con estilo, ancho y color

En este paso, añadiremos un border (borde) alrededor del padding y el contenido de nuestro elemento. La propiedad border es una forma abreviada que te permite establecer el ancho, el estilo y el color del borde de una sola vez.

Añadamos un borde negro sólido de 2 píxeles de ancho. Actualiza la regla .box en tu archivo style.css como se muestra a continuación:

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
}

Los valores para la propiedad border son border-width (ancho del borde), border-style (estilo del borde) y border-color (color del borde), respectivamente.

Guarda el archivo y actualiza la pestaña Web 8080. Ahora verás una línea negra dibujada alrededor del área de padding de la caja. El ancho total del elemento ha aumentado de nuevo para acomodar este nuevo borde.

Implementar la propiedad margin para espaciado

En este paso, controlaremos el espacio exterior al borde del elemento. Esto se hace utilizando la propiedad margin (margen). El margen crea espacio vacío alrededor de un elemento, alejando otros elementos de él.

Añadamos un margen de 50 píxeles a todos los lados de nuestra caja para crear cierta separación del encabezado y los bordes de la página. Añade la propiedad margin a la regla .box en style.css.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
}

Guarda el archivo y revisa la pestaña Web 8080. Observarás que toda la caja ahora está separada del elemento <h1> y alejada del borde izquierdo de la ventana del navegador. Esto demuestra cómo se utiliza el margen para controlar el espaciado entre elementos.

Añadir box-sizing border-box para incluir padding

En este paso, abordaremos un desafío común de diseño. Por defecto, las propiedades width (ancho) y height (alto) de un elemento se aplican solo a la caja de contenido. El padding y el borde se añaden encima de eso, lo que puede hacer que el dimensionamiento sea impredecible. Para nuestra caja, el ancho total es actualmente 300px (ancho) + 40px (padding izquierdo/derecho) + 4px (borde izquierdo/derecho) = 344px.

Para simplificar esto, podemos usar la propiedad box-sizing. Al establecerla en border-box, le indicamos al navegador que incluya el padding y el borde dentro del ancho y alto total del elemento.

Añade la propiedad box-sizing: border-box; a tu regla .box.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
  box-sizing: border-box;
}

Guarda el archivo y mira la pestaña Web 8080. Verás que la caja se reduce. Ahora, el ancho total de la caja, incluyendo el padding y el borde, es exactamente de 300 píxeles. El navegador ajusta automáticamente el área de contenido para que encaje. Este comportamiento es mucho más intuitivo para crear diseños.

Resumen

¡Felicitaciones por completar el laboratorio! Has aprendido con éxito los fundamentos del Modelo de Caja (Box Model) de CSS.

En este laboratorio, has practicado:

• Establecer el width (ancho) del área de contenido de un elemento.
• Aplicar padding para crear espacio entre el contenido y el borde.
• Añadir un border (borde) alrededor del padding y el contenido.
• Usar margin para crear espacio fuera del borde del elemento.
• Utilizar box-sizing: border-box para un dimensionamiento de elementos más predecible e intuitivo.

Comprender el Modelo de Caja es crucial para controlar el diseño y el espaciado de los elementos en una página web. Sigue practicando estos conceptos para dominar CSS.