---
id: bad87fee1348bd9aedf08826
title: Use Clockwise Notation to Specify the Padding of an Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/cB7mBS9'
---
## Description
Instead of specifying an element's padding-top
, padding-right
, padding-bottom
, and padding-left
properties individually, you can specify them all in one line, like this:
padding: 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 padding instructions.
## Instructions
Use Clockwise Notation to give the ".blue-box" class 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 elements 40px
of padding
.
testString: assert($(".blue-box").css("padding-top") === "40px", 'Your blue-box
class should give the top of elements 40px
of padding
.');
- text: Your blue-box
class should give the right of elements 20px
of padding
.
testString: assert($(".blue-box").css("padding-right") === "20px", 'Your blue-box
class should give the right of elements 20px
of padding
.');
- text: Your blue-box
class should give the bottom of elements 20px
of padding
.
testString: assert($(".blue-box").css("padding-bottom") === "20px", 'Your blue-box
class should give the bottom of elements 20px
of padding
.');
- text: Your blue-box
class should give the left of elements 40px
of padding
.
testString: assert($(".blue-box").css("padding-left") === "40px", 'Your blue-box
class should give the left of elements 40px
of padding
.');
- text: You should use the clockwise notation to set the padding of blue-box
class.
testString: assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of blue-box
class.');
```
## Challenge Seed
```html
margin
padding
padding
```
## Solution
```js
// solution required
```