freeCodeCamp

2.9 KiB

Raw Blame History

id	title	challengeType	videoUrl
bad82fee1322bd9aedf08721	Understand Absolute versus Relative Units	0	https://scrimba.com/c/cN66JSL

Description

The last several challenges all set an element's margin or padding with pixels (px). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px, CSS has a number of different length unit options that you can use. The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution. Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element's font. If you use it to set the font-size property itself, it's relative to the parent's font-size. Note
There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.

Instructions

Add a padding property to the element with class red-box and set it to 1.5em.

Tests

tests:
  - text: Your <code>red-box</code> class should have a <code>padding</code> property.
    testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'Your <code>red-box</code> class should have a <code>padding</code> property.');
  - text: Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.
    testString: assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), 'Your <code>red-box</code> class should give elements 1.5em 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: 20px 40px 20px 40px;
  }

  .red-box {
    background-color: red;
    margin: 20px 40px 20px 40px;

  }

  .green-box {
    background-color: green;
    margin: 20px 40px 20px 40px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>

Solution

// solution required

2.9 KiB Raw Blame History