---
id: bad87fee1348bd9afdf08726
title: Use Clockwise Notation to Specify the Margin of an Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/cB7mBS9'
---
## Description
Let's try this again, but with margin
this time.
Instead of specifying an element's margin-top
, margin-right
, margin-bottom
, and margin-left
properties individually, you can specify them all in one line, like this:
margin: 10px 20px 10px 20px;
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.
## Instructions
Use Clockwise Notation
to give the element with the blue-box
class 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
// solution required
```