2.4 KiB
2.4 KiB
id | title | challengeType | guideUrl | videoUrl |
---|---|---|---|---|
bad87fee1348bd9aedf08823 | Add a Negative Margin to an Element | 0 | https://www.freecodecamp.org/guide/certificates/add-a-negative-margin-to-an-element | https://scrimba.com/c/cnpyGs3 |
Description
margin
controls the amount of space between an element's border
and surrounding elements.
If you set an element's margin
to a negative value, the element will grow larger.
Instructions
margin
to a negative value like the one for the red box.
Change the margin
of the blue box to -15px
, so it fills the entire horizontal width of the yellow box around it.
Tests
tests:
- text: Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.
testString: assert($(".blue-box").css("margin-top") === "-15px", 'Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');
Challenge Seed
<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;
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Solution
<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>