---
id: bad88fee1348bd9aedf08825
title: Adjust the Padding of an Element
challengeType: 0
guideUrl: 'https://portuguese.freecodecamp.org/guide/certificates/adjust-the-padding-of-an-element'
videoUrl: ''
localeTitle: Ajustar o preenchimento de um elemento
---
## Description
Agora vamos colocar nosso Cat Photo App por um tempo e aprender mais sobre o estilo HTML. Você já deve ter percebido isso, mas todos os elementos HTML são essencialmente pequenos retângulos. Três propriedades importantes controlam o espaço que envolve cada elemento HTML: padding
, margin
e border
. O padding
um elemento controla a quantidade de espaço entre o conteúdo do elemento e sua border
. Aqui, podemos ver que a caixa azul e a caixa vermelha estão aninhadas dentro da caixa amarela. Observe que a caixa vermelha tem mais padding
que a caixa azul. Quando você aumenta o padding
da caixa azul, ela aumentará a distância ( padding
) entre o texto e a borda ao redor dele.
## Instructions
Altere o padding
de sua caixa azul para corresponder à sua caixa vermelha.
## Tests
```yml
tests:
- text: Sua turma de blue-box
deve fornecer elementos de 20px
de padding
.
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your blue-box
class should give elements 20px
of padding
.");'
```
## Challenge Seed
```html
margin
padding
padding
```
## Solution
```js
// solution required
```