Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
Puedes controlar cada lado de margin y padding por separado, o usar las propiedades abreviadas para escribir menos código.
Explicación
Estas son las formas más comunes de escribir margin y padding:
margin: 10px;Aplica el mismo margen en los 4 lados.
margin: 10px 20px;Primer valor arriba/abajo, segundo valor izquierda/derecha.
margin-top / -right / -bottom / -leftControlan cada lado por separado, útil cuando no son simétricos.
margin: 0 auto;Truco clásico para centrar horizontalmente un bloque con ancho definido (max-width o width).
Reto rápido
Cambia el padding de la tarjeta a valores distintos arriba/abajo e izquierda/derecha.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
El patrón margin: 0 auto (con un ancho definido) es la forma más común de centrar contenedores horizontalmente en CSS.
Dato extra
Existe un fenómeno llamado "colapso de márgenes": cuando dos márgenes verticales se tocan, a veces el navegador usa solo el más grande en vez de sumarlos.
Error común
Escribir margin: 20px auto esperando centrar también verticalmente: auto solo centra en el eje horizontal con este método, no en el vertical.
Siguiente paso
Con margin y padding dominados, resolvamos el problema clásico de los tamaños con box-sizing.
Ir a la siguiente lección