---
id: bad87fee1348bd9afdf08726
title: Use Clockwise Notation to Specify the Margin of an Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/cnpybAd'
---
## 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");
- text: Your blue-box
class should give the right of elements 20px
of margin
.
testString: assert($(".blue-box").css("margin-right") === "20px");
- text: Your blue-box
class should give the bottom of elements 20px
of margin
.
testString: assert($(".blue-box").css("margin-bottom") === "20px");
- text: Your blue-box
class should give the left of elements 40px
of margin
.
testString: assert($(".blue-box").css("margin-left") === "40px");
- text: You should use the clockwise notation to set the margin of blue-box
class.
testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
```
## Challenge Seed
```html
margin
padding
padding
```
## Solution
```html
margin
padding
padding
```