Padding

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

No CSS, padding é o espaço entre o conteúdo de um elemento e sua borda. O padding é usado para criar um respiro visual ao redor do conteúdo, tornando-o mais legível e visualmente atraente. Você pode controlar o padding em todos os quatro lados de um elemento (superior, direito, inferior e esquerdo) de forma independente ou usando a notação abreviada (shorthand).

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

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

padding-top: O preenchimento na parte superior do elemento.
padding-right: O preenchimento no lado direito do elemento.
padding-bottom: O preenchimento na parte inferior do elemento.

padding-left: O preenchimento no lado esquerdo do elemento.
value: O valor de preenchimento 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 o preenchimento (padding) para todos os quatro lados de uma só vez, por exemplo:

p {
    padding: 20px; /* Aplica o mesmo preenchimento aos quatro lados */
}

div {
    padding: 10px 25px; /* Define o preenchimento superior e inferior como 10px, e o preenchimento esquerdo e direito como 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* Define o preenchimento para cada lado individualmente */
}

Neste exemplo, todos os elementos <p> (parágrafo) têm um padding de 20px em todos os lados, todos os elementos <div> têm um padding superior e inferior de 10px e um padding esquerdo e direito de 25px, e todos os elementos com a classe button têm um padding superior de 15px, um padding direito de 30px, um padding inferior de 10px e um padding esquerdo de 5px.

Desafio

Fácil

Você recebeu um documento HTML com dois cabeçalhos. Sua tarefa é usar a propriedade padding para adicionar espaçamento ao redor do conteúdo desses elementos. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <h1>. Defina o padding como 20px em todos os lados.
Escreva uma regra CSS que tenha como alvo o elemento <h2>. Defina o padding superior e inferior como 10px e o padding esquerdo e direito como 30px.

Folha de consulta

O padding do CSS cria espaço entre o conteúdo de um elemento e sua borda.

Propriedades de padding individuais:

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

Notação abreviada:

/* Mesmo padding em todos os lados */
padding: 20px;

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

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

Os valores podem ser especificados em pixels (px), ems (em), porcentagens (%) ou outras unidades CSS válidas.

Experimente você mesmo

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>