¿Necesitas control preciso sobre el espaciado de tus elementos web? Este generador de espaciado CSS te permite crear código para margin y padding de forma visual. Ajusta cada lado individualmente, elige entre diferentes unidades (px, rem, em, %) y obtén el código CSS listo para usar. Perfecto para maquetación web y diseños responsivos.
✓ Control individual por lado (top, right, bottom, left) ✓ Múltiples unidades (px, rem, em, %) ✓ Vista previa en tiempo real ✓ Presets rápidos ✓ Código CSS listo para copiar
Genera código CSS para margin y padding de forma visual. Ajusta los valores y copia el código generado.
* Ideal para desarrollo web, diseños responsivos y maquetación
margin: 0px;
padding: 20px;
.elemento {
margin: 0px;
padding: 20px;
}
No hay espaciados guardados
Margin es el espacio exterior fuera del borde del elemento, separándolo de otros elementos. Padding es el espacio interior dentro del borde, entre el contenido y el borde del elemento.
Selecciona entre Margin o Padding, ajusta los valores individuales para cada lado (top, right, bottom, left) usando los controles deslizantes. Elige la unidad (px, rem, em, %) y copia el código CSS generado.
Usa px para tamaños fijos, rem para escalado accesible basado en el elemento raíz, em para escalado relativo al padre, y % para espaciado responsivo relativo al contenedor.
Usar unidades relativas como rem o % hace que el espaciado escale correctamente en diferentes tamaños de pantalla. El padding afecta el tamaño total del elemento, mientras que el margin afecta la separación entre elementos.
El colapso de márgenes ocurre cuando dos márgenes verticales adyacentes se combinan en uno solo. Generalmente ocurre entre elementos hermanos o entre elementos padre-hijo.