---
id: bad88fee1348bd9aedf08825
title: Adjust the Padding of an Element
challengeType: 0
guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/adjust-the-padding-of-an-element'
videoUrl: ''
localeTitle: Ajustar el relleno de un elemento
---
## Description
Ahora vamos a guardar nuestra aplicación Cat Photo por un tiempo y aprender más sobre el estilo de HTML. Es posible que ya hayas notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos. Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: padding
, margin
y border
. El padding
un elemento controla la cantidad de espacio entre el contenido del elemento y su border
. Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene más padding
que el cuadro azul. Cuando aumente el padding
del cuadro azul, aumentará la distancia ( padding
) entre el texto y el borde que lo rodea.
## Instructions
Cambie el padding
de su caja azul para que coincida con el de su caja roja.
## Tests
```yml
tests:
- text: Su clase de blue-box
debe dar elementos de padding
20px
.
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
```