---
id: bad87fee1348bd9aedf08826
title: Use Clockwise Notation to Specify the Padding of an Element
challengeType: 0
videoUrl: ''
localeTitle: Use la notación de las agujas del reloj para especificar el relleno de un elemento
---
## Description
En lugar de especificar las propiedades padding-top
, padding-right
, padding-bottom
y padding-left
individualmente, puede especificarlas todas en una línea, como esta: padding: 10px 20px 10px 20px;
Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado que utilizando las instrucciones de relleno específicas para cada lado.
## Instructions
Use la notación de las agujas del reloj para darle a la clase ".blue-box" un padding
de 40px
en su lado superior e izquierdo, pero solo 20px
en su lado inferior y derecho.
## Tests
```yml
tests:
- text: Su clase de blue-box
debe dar a la parte superior de los elementos 40px
de padding
.
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your blue-box
class should give the top of elements 40px
of padding
.");'
- text: Su clase de blue-box
debe otorgar el derecho de los elementos 20px
de padding
.
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your blue-box
class should give the right of elements 20px
of padding
.");'
- text: Su clase de blue-box
debe dar al fondo de los elementos 20px
de padding
.
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your blue-box
class should give the bottom of elements 20px
of padding
.");'
- text: Su clase de blue-box
debe dar a la izquierda de los elementos 40px
de padding
.
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your blue-box
class should give the left of elements 40px
of padding
.");'
- text: Debe usar la notación en el sentido de las agujas del reloj para configurar el relleno de la clase de 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
```