---
id: bad87fee1348bd9aedf08826
title: Use Clockwise Notation to Specify the Padding of an Element
challengeType: 0
videoUrl: ''
localeTitle: Использовать по часовой стрелке для указания заполнения элемента
---
## Description
Вместо того, чтобы отдельно указывать свойства padding-top
, padding-right
, padding-bottom
и padding-left
, вы можете указать их все в одной строке, например: padding: 10px 20px 10px 20px;
Эти четыре значения работают как часы: верх, правый, нижний, левый и будут давать то же самое, что и при использовании спецификаций дополнений для конкретной стороны.
## Instructions
Используйте «По часовой стрелке», чтобы присвоить классу «.blue-box» padding
40px
на верхней и левой стороне, но только 20 20px
на нижней и правой стороне.
## Tests
```yml
tests:
- text: Ваш blue-box
класс должен дать верхнюю часть элементов 40px
из padding
.
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your blue-box
class should give the top of elements 40px
of padding
.");'
- text: Ваш класс с blue-box
должен давать право на элементы 20px
padding
.
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your blue-box
class should give the right of elements 20px
of padding
.");'
- text: Ваш класс blue-box
должен дать основание элементов 20px
padding
.
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your blue-box
class should give the bottom of elements 20px
of padding
.");'
- text: Ваш blue-box
класс должен дать слева от элементов 40px
из padding
.
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your blue-box
class should give the left of elements 40px
of padding
.");'
- text: 'Вы должны использовать обозначение по часовой стрелке, чтобы установить заполнение класса blue-box
.'
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
```