---
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: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*padding[\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
```