Propiedades de Caja y Diseño

Propiedades de caja y diseño

Esta sección cubre todo lo esencial sobre cómo funcionan las cajas en CSS y las propiedades principales que afectan su apariencia y comportamiento en el flujo del documento. Cada subsección incluye un ejemplo pequeño (HTML) y el CSS mínimo necesario para aplicar lo aprendido.

2.1 Modelo de caja (Box Model)

El Box Model es el fundamento del diseño CSS. Cada elemento se compone de cuatro capas concéntricas:

Content (contenido): área donde aparece texto/imágenes. Se controla con width y height.
Padding (relleno): espacio transparente entre contenido y borde. Propiedades: padding-top, padding-right, padding-bottom, padding-left, o el atajo padding.
Border (borde): línea visible que rodea el padding. Tiene grosor, estilo y color.
Margin (margen): espacio transparente fuera del borde que separa elementos.

box-sizing: content-box (por defecto) hace que width/height se refiera solo al contenido. border-box incluye padding y border en width/height, facilitando cálculos.

Ejemplo interactivo — copia el HTML y el CSS por separado:

HTML:

<div class="caja-demo">¡Experimenta con padding, border y margin!</div>

CSS:

.caja-demo {
  width: 200px;
  padding: 20px;
  border: 5px solid #e74c3c;
  margin: 30px;
  background: #ecf0f1;
  box-sizing: border-box; /* Prueba cambiando a content-box */
}

2.2 Bordes (Borders)

Los bordes añaden una línea visible alrededor del elemento y forman parte del modelo de caja (ocupan espacio). Se componen de tres propiedades:

border-width: grosor del borde. Valores: thin, medium, thick, o medidas específicas (1px, 0.2em).
border-style: estilo de línea. Valores: none (sin borde), solid (línea continua), dashed (guiones), dotted (puntos), double (doble línea), groove, ridge, inset, outset.
border-color: color del borde. Acepta nombres, hex, rgb, hsl.

Atajo: border: [width] [style] [color]; define las tres propiedades a la vez. También puedes usar border-top, border-right, border-bottom, border-left para lados específicos.

Ejemplo interactivo — prueba diferentes estilos de borde:

HTML:

<div class="borde-demo">Cambia 'solid' por 'dashed', 'dotted' o 'double'</div>

CSS:

.borde-demo {
  border: 4px solid #3498db; /* Cambia solid por: dashed, dotted, double */
  padding: 15px;
  margin: 10px;
  background: #f8f9fa;
}

2.3 Márgenes (Margins)

Los márgenes crean espacio exterior alrededor del elemento, separándolo de otros elementos. Propiedades individuales: margin-top, margin-right, margin-bottom, margin-left.

Valores de margin: longitudes (10px, 1em), porcentajes (5%), auto (centra automáticamente), o 0 (sin margen).

Atajos de margin:

margin: 10px; — aplica 10px a todos los lados.
margin: 10px 20px; — 10px arriba/abajo, 20px izquierda/derecha.
margin: 10px 20px 30px; — 10px arriba, 20px lados, 30px abajo.
margin: 10px 20px 30px 40px; — arriba, derecha, abajo, izquierda (sentido horario).

Colapso de márgenes: los márgenes verticales adyacentes pueden colapsar en uno solo (el mayor de los dos).

Ejemplo interactivo — experimenta con diferentes márgenes:

HTML:

<div class="margen-demo">Caja A - Cambia el margin</div>
<div class="margen-demo">Caja B - ¡Ve cómo colapsan los márgenes!</div>

CSS:

.margen-demo {
  margin: 20px; /* Prueba: 10px 50px, o 5px 10px 15px 20px */
  padding: 10px;
  background: #2ecc71;
  color: white;
  border: 2px solid #27ae60;
}

2.4 Rellenos (Padding)

El padding crea espacio interno entre el contenido y el borde del elemento. A diferencia del margin, el padding toma el color de fondo del elemento. Propiedades individuales: padding-top, padding-right, padding-bottom, padding-left.

Valores de padding: longitudes (10px, 1em), porcentajes (5%), o 0 (sin relleno). No acepta valores negativos ni auto.

Atajos de padding: funcionan igual que margin:

padding: 10px; — 10px en todos los lados.
padding: 10px 20px; — 10px arriba/abajo, 20px izquierda/derecha.
padding: 10px 20px 30px 40px; — arriba, derecha, abajo, izquierda.

Ejemplo interactivo — ve cómo el padding afecta el espacio interno:

HTML:

<div class="padding-demo">¡El padding crea espacio interno! Cambia los valores.</div>

CSS:

.padding-demo {
  padding: 25px; /* Prueba: 10px 30px, o 5px 15px 25px 35px */
  background: #f39c12;
  border: 3px solid #e67e22;
  margin: 20px;
  color: white;
}

2.5 Tamaño (width, height, max-width)

Estas propiedades controlan las dimensiones del área de contenido del elemento:

width: ancho del contenido. Valores: longitudes (300px, 20em), porcentajes (50%), auto (automático).
height: alto del contenido. Mismos valores que width.
min-width/min-height: tamaño mínimo. Útil para evitar que elementos se vuelvan demasiado pequeños.
max-width/max-height: tamaño máximo. Crucial para diseño responsive — evita que elementos crezcan demasiado en pantallas grandes.

Responsive: usar width: 100%; max-width: 800px; hace que el elemento ocupe todo el ancho disponible hasta un límite.

height: auto permite que la altura se ajuste automáticamente al contenido.

Ejemplo interactivo — redimensiona la ventana para ver responsive:

HTML:

<div class="tamano-demo">¡Redimensiona la ventana!</div>

CSS:

.tamano-demo {
  width: 100%; /* Prueba: 300px, 80%, auto */
  max-width: 500px; /* Cambia este valor: 200px, 800px */
  height: 150px; /* Prueba: auto, 100px, 200px */
  background: #9b59b6;
  color: white;
  text-align: center;
  line-height: 150px;
  margin: 20px auto;
}

2.6 Contorno (Outline)

El outline es una línea que se dibuja alrededor del elemento, por fuera del borde, sin ocupar espacio en el layout. Es especialmente útil para indicar foco en elementos interactivos.

Propiedades de outline:

outline-width: grosor. Valores: thin, medium, thick, o medidas (2px).
outline-style: estilo de línea. Valores: none, solid, dashed, dotted, double, groove, ridge, inset, outset.
outline-color: color del outline. Acepta invert (invierte el color de fondo), nombres, hex, rgb, hsl.
outline-offset: distancia entre el borde y el outline. Puede ser negativa para que se superponga.

Atajo: outline: [width] [style] [color];

Accesibilidad: es crucial para navegación por teclado — no elimines outline en :focus sin proporcionar alternativa.

Ejemplo interactivo — haz clic en el botón para ver el outline:

HTML:

<button class="outline-demo">¡Haz clic aquí para ver el outline!</button>

CSS:

.outline-demo {
  padding: 15px 25px;
  background: #e74c3c;
  color: white;
  border: none;
  margin: 20px;
  cursor: pointer;
}

.outline-demo:focus {
  outline: 4px dashed #f1c40f; /* Prueba: solid, dotted, double */
  outline-offset: 6px; /* Cambia: 2px, -2px, 10px */
}

2.7 Overflow

La propiedad overflow controla qué sucede cuando el contenido del elemento es más grande que su caja contenedora. También existe overflow-x (horizontal) y overflow-y (vertical) para control independiente.

Valores de overflow:

visible (por defecto): el contenido se desborda y es visible fuera de la caja.
hidden: el contenido sobrante se oculta/corta — no hay scroll.
scroll: siempre muestra barras de desplazamiento, incluso si no son necesarias.
auto: muestra barras de scroll sólo cuando el contenido se desborda (recomendado).
clip: similar a hidden, pero más restrictivo — evita crear contextos de scroll.

Efectos secundarios: overflow diferente a visible puede crear un nuevo contexto de formateo de bloque y afectar el posicionamiento de elementos internos.

Ejemplo interactivo — cambia 'auto' por 'hidden' o 'scroll':

HTML:

<div class="overflow-demo">
  Este es un texto muy largo que definitivamente no cabe en esta pequeña caja. 
  Sigue leyendo para ver cómo el overflow controla qué pasa con el contenido 
  que no cabe. ¡Prueba cambiar 'auto' por 'hidden', 'scroll' o 'visible'!
</div>

CSS:

.overflow-demo {
  width: 250px;
  height: 100px;
  overflow: auto; /* Cambia por: hidden, scroll, visible */
  border: 3px solid #34495e;
  padding: 10px;
  background: #ecf0f1;
}

Resumen ampliado: Para diseños predecibles usa box-sizing: border-box, controla padding/border/margin con atajos cuando convenga, y usa max-width y overflow para manejar contenido y responsividad.