Márgenes

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 35 de 76.

En CSS, margin es el espacio alrededor de un elemento, fuera de cualquier borde definido. Es otra parte esencial del modelo de caja. Los márgenes se utilizan para crear espacio entre los elementos, separándolos entre sí.

Puedes controlar el margen en los cuatro lados de un elemento (superior, derecho, inferior e izquierdo) de forma independiente o utilizando la notación abreviada.

Aquí tienes la sintaxis básica para usar la propiedad margin:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: El margen en el lado superior del elemento.
margin-right: El margen en el lado derecho del elemento.
margin-bottom: El margen en el lado inferior del elemento.

margin-left: El margen en el lado izquierdo del elemento.
value: El valor de margen deseado, que puede especificarse en píxeles (px), ems (em), porcentajes (%) u otras unidades CSS válidas.

También puedes usar la notación abreviada para establecer el margen de los cuatro lados a la vez, por ejemplo:

p {
    margin: 20px; /* Aplica el mismo margen a los cuatro lados */
}

div {
    margin: 10px 25px; /* Establece el margen superior e inferior en 10px, y el margen izquierdo y derecho en 25px */
}

.button {
    margin: 15px 30px 10px 5px;/* Establece el margen para cada lado individualmente */
}

En este ejemplo, todos los elementos <p> tienen un margen de 20px en todos los lados, todos los elementos <div> tienen un margen superior e inferior de 10px y un margen izquierdo y derecho de 25px, y todos los elementos con la clase button tienen un margen superior de 15px, un margen derecho de 30px, un margen inferior de 10px y un margen izquierdo de 5px.

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>) y una división (<div>). Tu tarea es usar la propiedad margin para añadir espacio alrededor de estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <h1>. Establece el margin en 20px en todos los lados.
Escribe una regla CSS que apunte al elemento <div>. Establece el margin superior e inferior en 10px y el margin izquierdo y derecho en 30px.

Hoja de referencia

La propiedad margin crea espacio alrededor de un elemento, fuera de cualquier borde. Puedes controlar el margen en los cuatro lados de forma independiente o usar la notación abreviada.

Propiedades de margen individuales:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

Notación abreviada:

/* El mismo margen en todos los lados */
margin: 20px;

/* Superior/inferior: 10px, Izquierda/derecha: 25px */
margin: 10px 25px;

/* Superior: 15px, Derecha: 30px, Inferior: 10px, Izquierda: 5px */
margin: 15px 30px 10px 5px;

Pruébalo tú mismo

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>