---
id: bad87fee1348bd9aedf08824
title: Add Different Padding to Each Side of an Element
challengeType: 0
guideUrl: 'https://www.freecodecamp.org/guide/certificates/add-different-padding-to-each-side-of-an-element'
videoUrl: 'https://scrimba.com/c/cB7mwUw'
---
## Description
Sometimes you will want to customize an element so that it has different amounts of padding
on each of its sides.
CSS allows you to control the padding
of all four individual sides of an element with the padding-top
, padding-right
, padding-bottom
, and padding-left
properties.
## Instructions
Give the blue box a padding
of 40px
on its top and left side, but only 20px
on its bottom and right side.
## Tests
```yml
tests:
- text: Your blue-box
class should give the top of the elements 40px
of padding
.
testString: assert($(".blue-box").css("padding-top") === "40px", 'Your blue-box
class should give the top of the elements 40px
of padding
.');
- text: Your blue-box
class should give the right of the elements 20px
of padding
.
testString: assert($(".blue-box").css("padding-right") === "20px", 'Your blue-box
class should give the right of the elements 20px
of padding
.');
- text: Your blue-box
class should give the bottom of the elements 20px
of padding
.
testString: assert($(".blue-box").css("padding-bottom") === "20px", 'Your blue-box
class should give the bottom of the elements 20px
of padding
.');
- text: Your blue-box
class should give the left of the elements 40px
of 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
```