Absolute vs relative

HTML-CSS
#1

Tell us what’s happening:
What is the difference between relative length and absolute length? Thank you.

“You can specify the width of an element using the width property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element.”

Your code so far


<style>
  h4 {
    text-align: center;
  }
  p {
    text-align: justify;
  }
  .links {
    margin-right: 20px;
    text-align: left;
  }
  .fullCard {
    
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
    width: 245px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property

#2

Let say we have two screen, one is 32"(a TV), and another is 5"(a phone).

Both has the same resolution of 1080p (1080 x 1920)

This is certain the pixel density on phone is much more than the TV (quick math :sunglasses: )

So as pixel density (DPI) goes high, it means we get smaller pixels.

So simple now, if you like to draw a line with width of 1 pixel, it’s kind of very good visible in TV screen(big pixels), while it could be very very small in phone screen

Pixel is a absolute unit, and when you say I want a line of 1pixel, the system doesn’t matter about the screen DPI, it just draws it out.

So in your coding, you would see 1pixel good enough using your monitor, but not well with your mobile.

Relative units could be name also as real unit. This is recommended to use relative units when you like to have the same sizes in TV on phone too.

Let say inch unit, in TV you can have many inc boxes! while in phone you may get only 4-5 1inch boxes. This is becasue system knows how much pixel is needed to draw one inch. in TV this could be 10pixel in 10pixel, while in phone it could be 200px in 200pixel

For web programming, you may use relative units over absolute units, but not all the time, some stuff needs pixels.

#3