---
id: bad87fee1348bd9aedf08822
title: Adjust the Margin of an Element
challengeType: 0
guideUrl: 'https://www.freecodecamp.org/guide/certificates/adjust-the-margin-of-an-element'
videoUrl: 'https://scrimba.com/c/cVJarHW'
---
## Description
An element's margin
controls the amount of space between an element's border
and surrounding elements.
Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger margin
than the blue box, making it appear smaller.
When you increase the blue box's margin
, it will increase the distance between its border and surrounding elements.
## Instructions
Change the margin
of the blue box to match that of the red box.
## Tests
```yml
tests:
- text: Your blue-box
class should give elements 20px
of margin
.
testString: assert($(".blue-box").css("margin-top") === "20px", 'Your blue-box
class should give elements 20px
of margin
.');
```
## Challenge Seed
```html
margin
padding
padding
```
## Solution
```js
margin
padding
padding
```