Modelo de Caja en CSS: Margin, Border y Padding

El modelo de caja en CSS es un concepto fundamental que describe cómo los elementos HTML se organizan y cómo se calculan sus dimensiones. Cada elemento se representa como una caja rectangular que tiene varias capas: contenido, padding (relleno), border (borde) y margin (margen). Entender cómo funciona este modelo es esencial para diseñar y posicionar elementos en una página web.

1. Contenido (content)

El contenido es el área interna de la caja donde se muestra el texto, imágenes u otros elementos. El tamaño de esta área se define por las propiedades de width y height.

• Ejemplo de código:

.caja {
    width: 200px;
    height: 100px;
}

2. Padding (padding)

El padding es el espacio entre el contenido y el borde de la caja. Se puede aplicar padding en todos los lados (superior, derecho, inferior, izquierdo) o de manera específica en cada uno de ellos.

• Sintaxis:

selector {
    padding: valor; /* Aplica el mismo valor a todos los lados */
}

O:

selector {
    padding-top: valor;
    padding-right: valor;
    padding-bottom: valor;
    padding-left: valor;
}

Ejemplo:

.caja {
    padding: 20px; /* 20px de espacio en todos los lados */
}

3. Border (border)

El borde rodea el padding (si existe) y el contenido de la caja. La propiedad border permite definir el grosor, estilo y color del borde.

• Sintaxis:

selector {
    border: grosor estilo color;
}

Ejemplo:

.caja {
    border: 2px solid black; /* Un borde negro, sólido y de 2px de grosor */
}

• Propiedades adicionales:
  • border-width: Define el grosor del borde.
  • border-style: Define el estilo del borde (solid, dashed, dotted, etc.).
  • border-color: Define el color del borde.

4. Margin (margin)

El margen es el espacio exterior alrededor del borde de la caja, separando el elemento de otros elementos adyacentes. Al igual que el padding, el margen se puede aplicar de manera general o específica para cada lado.

• Sintaxis:

selector {
    margin: valor; /* Aplica el mismo valor a todos los lados */
}

O:

selector {
    margin-top: valor;
    margin-right: valor;
    margin-bottom: valor;
    margin-left: valor;
}

Ejemplo:

.caja {
    margin: 10px; /* 10px de margen en todos los lados */
}

5. Diagrama del Modelo de Caja

Aquí está la estructura del modelo de caja con un ejemplo visual:

+---------------------------+
|         margin             |  <- Espacio externo
|  +---------------------+  |
|  |      border          |  |  <- Borde de la caja
|  |  +---------------+  |  |
|  |  |    padding     |  |  |  <- Relleno
|  |  | +-----------+ |  |  |
|  |  | |  content   | |  |  |  <- Contenido
|  |  | +-----------+ |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

content: Área donde se muestra el contenido del elemento.padding: Espacio entre el contenido y el borde.border: Contorno que rodea el padding y el contenido.margin: Espacio alrededor del borde, separando la caja de otros elementos.

Ejemplo Completo

.caja {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid #3498db;
    margin: 20px;
}

Este código define una caja con un ancho de 200px, alto de 100px, 10px de padding, un borde azul sólido de 2px, y 20pxde margen alrededor.