Margin en Css

< Anterior Siguiente >

¿Qué es la propiedad margin en CSS?

La propiedad margin en CSS se utiliza para crear espacio alrededor de los elementos, fuera de sus bordes. Es posible especificar márgenes para los cuatro lados del elemento (superior, derecho, inferior e izquierdo).

Cómo Usar margin en CSS

La propiedad margin se puede definir de varias maneras:

1. Margin con un Solo Valor

Al especificar un solo valor para margin, este se aplicará a los cuatro lados del elemento.

.example-box {
    margin: 20px;
}
Ejemplo de margen de 20px en todos los lados

2. Margin con Valores Específicos para Cada Lado

Puedes definir diferentes valores para cada lado utilizando los valores margin-top, margin-right, margin-bottom, y margin-left. También puedes usar la notación abreviada para definir los cuatro márgenes en una sola línea.

.example-box {
    margin: 10px 20px 30px 40px; /* margen superior, derecho, inferior, izquierdo */
}
Ejemplo de margen superior de 10px, derecho de 20px, inferior de 30px, izquierdo de 40px

3. Margin Automático

Utilizar margin: auto; es útil para centrar elementos horizontalmente dentro de su contenedor.

.example-box {
    width: 50%;
    margin: auto;
}
Ejemplo de margen automático para centrar horizontalmente

Ejemplos Prácticos

A continuación, se muestra cómo la propiedad margin afecta el diseño y la disposición de los elementos en la página:

header.encabezado {
    margin-bottom: 20px;
}

En este caso, el margen inferior de 20px crea espacio entre el encabezado y el siguiente elemento en la página.

Consejos para Usar margin en CSS