Lección interactiva: margin, padding, border

Esta lección se centra en la práctica.

Ya aprendiste que cada elemento es una caja. Ahora vas a cambiar el espacio dentro de la caja, el espacio fuera de la caja y la línea que rodea la caja.

Qué vas a practicar

• margin crea espacio fuera del elemento.
• padding crea espacio dentro del elemento.
• border dibuja una línea alrededor del padding y el contenido.
• border-radius redondea las esquinas de la caja.
• border-style cambia el tipo de línea.

Prueba el playground interactivo

Usa los campos numéricos para cambiar valores en píxeles. Usa el desplegable para probar cada estilo de borde.

Observa la caja de vista previa y el código CSS debajo. Cada control cambia una declaración CSS.

.preview-box {
  margin: 24px;
  padding: 24px;
  border: 4px solid #2563eb;
  border-radius: 12px;
}