2.2 KiB
2.2 KiB
id | title | challengeType | guideUrl | videoUrl |
---|---|---|---|---|
bad88fee1348bd9aedf08825 | Adjust the Padding of an Element | 0 | https://www.freecodecamp.org/guide/certificates/adjust-the-padding-of-an-element | https://scrimba.com/c/cED8ZC2 |
Description
padding
, margin
, and border
.
An element's padding
controls the amount of space between the element's content and its border
.
Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more padding
than the blue box.
When you increase the blue box's padding
, it will increase the distance (padding
) between the text and the border around it.
Instructions
padding
of your blue box to match that of your red box.
Tests
tests:
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.
testString: assert($(".blue-box").css("padding-top") === "20px", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</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;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 10px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Solution
// solution required