Margen
Margen
Margen es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 1 lecciones en total.
Introducción
El margen es uno de los temas más importantes de CSS.
Los márgenes son los espacios que creamos alrededor de los límites de un elemento.
Explicación de los lados del margen
Independientemente del tipo de elemento, al crear un margen no debemos pensar en él como si tuviera 4 lados (superior, derecho, inferior e izquierdo).
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>Advertencia
Al igual que podemos asignar un valor específico a margin, también podemos asignarle un valor porcentual.
Advertencia
Además de asignar un valor específico al margen, también podemos asignarle un valor porcentual.
Forma abreviada de margin
En nuestro ejemplo anterior, tuvimos que escribir 4 líneas de código para aplicar un margen a todos los lados de una caja.
CSS nos proporciona una forma abreviada para escribir un código más corto.
Después de definir la propiedad margin, podemos asignar los valores del margen separándolos con espacios, en este orden: superior, derecho, inferior e izquierdo (es decir, en el sentido de las agujas del reloj).
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
Advertencia sobre el margen negativo
Los márgenes pueden tener un valor negativo. El padding que veremos en la siguiente lección no puede tener un valor negativo.
margin auto
Utilizaremos el valor auto de la propiedad margin para centrar nuestros elementos horizontalmente. Independientemente de la resolución de la pantalla, el elemento quedará centrado horizontalmente.
Supongamos que la pantalla mide 1200px y nuestro elemento mide 400px. El elemento quedará centrado, con espacios de 400px a la izquierda y a la derecha.
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>Enhorabuena
Enhorabuena 🎉
En esta sección, hemos aprendido los márgenes de CSS.
En la siguiente sección, aprenderemos los paddings de CSS.
Preguntas frecuentes
¿La lección «Margen» es gratis?
Sí — el texto completo de «Margen» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 1 lecciones en total.
¿Qué aprenderé en «Margen»?
Margen Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «Margen»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.