freeCodeCamp/add-different-padding-to-each-side-of-an-element.english.md at bd68b70f3de9699eaa094d14d4706bea3c83d43f

Oliver Eyton-Williams bd68b70f3d

Feat: hide blocks not challenges (#39504 )

* fix: remove isHidden flag from frontmatter

* fix: add isUpcomingChange

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

* feat: hide blocks not challenges

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

2020-09-03 15:07:40 -07:00

3.1 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
bad87fee1348bd9aedf08824	Add Different Padding to Each Side of an Element	0	https://scrimba.com/c/cB7mwUw	16634

Description

Sometimes you will want to customize an element so that it has different amounts of padding on each of its sides. CSS allows you to control the padding of all four individual sides of an element with the padding-top, padding-right, padding-bottom, and padding-left properties.

Instructions

Give the blue box a padding of 40px on its top and left side, but only 20px on its bottom and right side.

Tests

tests:
  - text: Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.
    testString: assert($(".blue-box").css("padding-top") === "40px");
  - text: Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.
    testString: assert($(".blue-box").css("padding-right") === "20px");
  - text: Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.
    testString: assert($(".blue-box").css("padding-bottom") === "20px");
  - text: Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.
    testString: assert($(".blue-box").css("padding-left") === "40px");

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-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
  }
</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

<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-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }
</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>

3.1 KiB Raw Blame History