Modelo de Caja

Todo en CSS es una caja. Textos, imágenes, botones... ¡Todo! El Modelo de Caja explica cómo se estructura cada elemento: contenido, relleno, borde y margen. Entenderlo es clave para dominar CSS.

1. Las 4 Capas del Modelo de Caja

De adentro hacia afuera:

┌─────────────────────────────────┐
│      MARGEN (margin)            │
│  ┌─────────────────────────────┐ │
│  │  BORDE (border)             │ │
│  │  ┌─────────────────────────┐ │ │
│  │  │ PADDING (padding)       │ │ │
│  │  │ ┌─────────────────────┐ │ │ │
│  │  │ │ CONTENIDO (content) │ │ │ │
│  │  │ └─────────────────────┘ │ │ │
│  │  └─────────────────────────┘ │ │
│  └─────────────────────────────┘ │
└─────────────────────────────────┘
                

2. Padding (Relleno)

Crea espacio dentro del elemento. Respeta el color de fondo.

div {
  padding: 20px; /* 20px en todos los lados */
}

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

/* Forma corta: arriba, derecha, abajo, izquierda */
div {
  padding: 10px 20px 10px 20px;
}

/* Aún más corta: vertical, horizontal */
div {
  padding: 10px 20px;
}

3. Margin (Margen)

Crea espacio fuera del elemento. Es transparente y crea distancia entre elementos.

div {
  margin: 20px; /* 20px en todos los lados */
}

div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

/* Forma corta */
div {
  margin: 10px 20px;
}

/* Centrar horizontalmente */
div {
  margin: 0 auto; /* 0 arriba/abajo, auto izquierda/derecha */
}

4. Border (Borde)

Una línea alrededor del elemento. Puedes personalizar su estilo, grosor y color.

/* Borde simple */
div {
  border: 2px solid black;
}

/* Desglosado */
div {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

/* Bordes individuales */
div {
  border-top: 2px solid red;
  border-right: 2px dashed blue;
  border-bottom: 2px dotted green;
  border-left: 2px double yellow;
}

5. Border Radius (Esquinas Redondeadas)

Redondea las esquinas del elemento.

/* Todas las esquinas */
div {
  border-radius: 10px;
}

/* Esquinas individuales */
div {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 20px;
}

/* Hacer un círculo */
div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

6. Width y Height

Define el tamaño del contenido del elemento.

div {
  width: 300px; /* Ancho fijo */
  height: 200px; /* Alto fijo */
}

div {
  width: 100%; /* 100% del padre */
  height: auto; /* Automático según contenido */
}

div {
  max-width: 500px; /* Ancho máximo */
  min-width: 200px; /* Ancho mínimo */
}

7. Box Sizing

Controla si el padding y border se incluyen en el ancho y alto total.

/* Por defecto: content-box */
div {
  width: 300px;
  padding: 20px;
  /* Ancho total: 300px + 40px (padding) = 340px */
}

/* Mejor: border-box */
div {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  /* Ancho total: 300px (padding incluido) */
}

/* Aplicar a todos los elementos */
* {
  box-sizing: border-box;
}