---
id: bad87fee1248bd9aedf08824
title: Add Different Margins to Each Side of an Element
challengeType: 0
videoUrl: ''
localeTitle: Añadir diferentes márgenes a cada lado de un elemento
---
## Description
A veces querrá personalizar un elemento para que tenga un margin
diferente en cada uno de sus lados. CSS le permite controlar el margin
de los cuatro lados individuales de un elemento con las propiedades margin-top
, margin-right
, margin-bottom
y margin-left
.
## Instructions
Dé a la caja azul un margin
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 margin
.
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your blue-box
class should give the top of elements 40px
of margin
.");'
- text: Su clase de blue-box
debe otorgar el derecho de los elementos 20 20px
de margin
.
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your blue-box
class should give the right of elements 20px
of margin
.");'
- text: Su clase de blue-box
debe dar a la parte inferior de los elementos 20 20px
de margin
.
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your blue-box
class should give the bottom of elements 20px
of margin
.");'
- text: Su clase de blue-box
debe dar a la izquierda de los elementos 40px
de margin
.
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your blue-box
class should give the left of elements 40px
of margin
.");'
```
## Challenge Seed
```html
margin
padding
padding
```
## Solution
```js
// solution required
```