Margens

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 35 de 76.

No CSS, margin é o espaço ao redor de um elemento, fora de quaisquer bordas definidas. É outra parte essencial do box model. As margens são usadas para criar espaço entre os elementos, separando-os uns dos outros.

Você pode controlar a margem em todos os quatro lados de um elemento (superior, direito, inferior e esquerdo) de forma independente ou usando a notação abreviada.

Aqui está a sintaxe básica para usar a propriedade margin:

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

margin-top: A margem na parte superior do elemento.
margin-right: A margem no lado direito do elemento.
margin-bottom: A margem na parte inferior do elemento.

margin-left: A margem no lado esquerdo do elemento.
value: O valor da margem desejado, que pode ser especificado em pixels (px), ems (em), porcentagens (%) ou outras unidades CSS válidas.

Você também pode usar a notação abreviada para definir a margem para todos os quatro lados de uma só vez, por exemplo:

p {
    margin: 20px; /* Aplica a mesma margem a todos os quatro lados */
}

div {
    margin: 10px 25px; /* Define a margem superior e inferior como 10px, e a margem esquerda e direita como 25px */
}

.button {
    margin: 15px 30px 10px 5px;/* Define a margem para cada lado individualmente */
}

Neste exemplo, todos os elementos <p> têm uma margem de 20px em todos os lados, todos os elementos <div> têm uma margem superior e inferior de 10px e uma margem esquerda e direita de 25px, e todos os elementos com a classe button têm uma margem superior de 15px, uma margem direita de 30px, uma margem inferior de 10px e uma margem esquerda de 5px.

Desafio

Fácil

Você recebeu um documento HTML com um título (<h1>) e uma divisão (<div>). Sua tarefa é usar a propriedade margin para adicionar espaço ao redor desses elementos. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <h1>. Defina a margin como 20px em todos os lados.
Escreva uma regra CSS que tenha como alvo o elemento <div>. Defina a margin superior e inferior como 10px e a margin esquerda e direita como 30px.

Folha de consulta

A propriedade margin cria espaço ao redor de um elemento, fora de quaisquer bordas. Você pode controlar a margem nos quatro lados de forma independente ou usar a notação abreviada.

Propriedades de margem individuais:

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

Notação abreviada:

/* Mesma margem em todos os lados */
margin: 20px;

/* Superior/inferior: 10px, Esquerda/direita: 25px */
margin: 10px 25px;

/* Superior: 15px, Direita: 30px, Inferior: 10px, Esquerda: 5px */
margin: 15px 30px 10px 5px;

Experimente você mesmo

<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>