---
id: bad87fee1348bd9aedf08824
title: Add Different Padding to Each Side of an Element
challengeType: 0
guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-different-padding-to-each-side-of-an-element'
videoUrl: ''
localeTitle: Añadir diferente relleno a cada lado de un elemento
---
## Description
A veces querrá personalizar un elemento para que tenga diferentes cantidades de padding
en cada uno de sus lados. CSS le permite controlar el padding
de los cuatro lados individuales de un elemento con las propiedades padding-top
, padding-right
, padding-bottom
y padding-left
.
## Instructions
Dale a la caja azul un padding
de 40px
en su lado superior e izquierdo, pero solo 20px
en su lado inferior y derecho.
## Tests
```yml
tests:
- text: Su clase de blue-box
debe dar a la parte superior de los elementos 40px
de padding
.
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your blue-box
class should give the top of the elements 40px
of padding
.");'
- text: Su clase de blue-box
debe otorgar el derecho de los elementos 20px
de padding
.
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your blue-box
class should give the right of the elements 20px
of padding
.");'
- text: Su clase de blue-box
debe dar al fondo de los elementos 20px
de padding
.
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your blue-box
class should give the bottom of the elements 20px
of padding
.");'
- text: Su clase de blue-box
debe dar a la izquierda de los elementos 40px
de padding
.
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your blue-box
class should give the left of the elements 40px
of padding
.");'
```
## Challenge Seed
```html
margin
padding
padding
```
## Solution
```js
// solution required
```