---
id: bad87fee1248bd9aedf08824
title: Add Different Margins to Each Side of an Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/cg4RWh4'
---
## Description
Sometimes you will want to customize an element so that it has a different margin
on each of its sides.
CSS allows you to control the margin
of all four individual sides of an element with the margin-top
, margin-right
, margin-bottom
, and margin-left
properties.
## Instructions
Give the blue box a margin
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 elements 40px
of margin
.
testString: assert($(".blue-box").css("margin-top") === "40px", 'Your blue-box
class should give the top of elements 40px
of margin
.');
- text: Your blue-box
class should give the right of elements 20px
of margin
.
testString: assert($(".blue-box").css("margin-right") === "20px", 'Your blue-box
class should give the right of elements 20px
of margin
.');
- text: Your blue-box
class should give the bottom of elements 20px
of margin
.
testString: assert($(".blue-box").css("margin-bottom") === "20px", 'Your blue-box
class should give the bottom of elements 20px
of margin
.');
- text: Your blue-box
class should give the left of elements 40px
of margin
.
testString: assert($(".blue-box").css("margin-left") === "40px", 'Your blue-box
class should give the left of elements 40px
of margin
.');
```
## Challenge Seed
```html
margin
padding
padding
```
## Solution
```js
margin
padding
padding
```