2018-09-30 22:01:58 +00:00
---
id: bad87fee1348bd9aedf08823
title: Add a Negative Margin to an Element
challengeType: 0
2018-10-08 15:00:20 +00:00
guideUrl: 'https://www.freecodecamp.org/guide/certificates/add-a-negative-margin-to-an-element'
2018-09-30 22:01:58 +00:00
videoUrl: 'https://scrimba.com/c/cnpyGs3'
---
## Description
< section id = 'description' >
An element's < code > margin< / code > controls the amount of space between an element's < code > border< / code > and surrounding elements.
If you set an element's < code > margin< / code > to a negative value, the element will grow larger.
< / section >
## Instructions
< section id = 'instructions' >
Try to set the < code > margin< / code > to a negative value like the one for the red box.
Change the < code > margin< / code > of the blue box to < code > -15px< / code > , so it fills the entire horizontal width of the yellow box around it.
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 13:37:37 +00:00
tests:
- text: Your < code > blue-box</ code > class should give elements < code > -15px</ code > of < code > margin</ code > .
2018-10-20 18:02:47 +00:00
testString: assert($(".blue-box").css("margin-top") === "-15px", 'Your < code > blue-box< / code > class should give elements < code > -15px< / code > of < code > margin< / code > .');
2018-09-30 22:01:58 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< style >
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
.red-box {
background-color: crimson;
color: #fff ;
padding: 20px;
margin: -15px;
}
.blue-box {
background-color: blue;
color: #fff ;
padding: 20px;
margin: 20px;
}
< / style >
< div class = "box yellow-box" >
< h5 class = "box red-box" > padding< / h5 >
< h5 class = "box blue-box" > padding< / h5 >
< / div >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2018-10-23 13:21:53 +00:00
```html
< style >
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff ;
padding: 20px;
margin: -15px;
}
.blue-box {
background-color: blue;
color: #fff ;
padding: 20px;
margin: 20px;
margin-top: -15px;
}
< / style >
< div class = "box yellow-box" >
< h5 class = "box red-box" > padding< / h5 >
< h5 class = "box blue-box" > padding< / h5 >
< / div >
2018-09-30 22:01:58 +00:00
```
< / section >