Preenchimento

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 34 de 76.

Em CSS, padding é o espaço entre o conteúdo de um elemento e sua borda. O padding é usado para criar um espaço visual ao redor do conteúdo, tornando-o mais legível e visualmente atraente. Você pode controlar o padding nos 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 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 dos quatro lados de uma só vez, por exemplo:

p {
    padding: 20px; /* Aplica o mesmo padding a todos os quatro lados */
}

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

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

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

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>