Measuring Units

Measuring Units:

we use length in width, height, margin, padding, font-size. There are two type of units in css .

  1. Absolute
  2. Relative

Absolute Units:

They are not relative to anything else, and are generally considered to always be the same size. The only value that you will commonly use is px (pixels).

  • px (1inch = 96px)
  • pt (1inch = 72pt)
  • pc (1inch = 12pt)

Relative Units:

Relative length units are relative to something else, perhaps the size of the parent element’s font, or the size of the viewport.

  • em - It is relatvie to the size of direct parent. It is multiplier of direct parent element
  • rem - It is relative to the root of the HTML element. It is multiplier of root element
  • vh - 1% of viewport height(Viewport = the browser window size)
  • vw - 1% of viewport width(Viewport = the browser window size)
  • % - relative to parent
Examples:

HTML

<div id="parent">
    <p>This is parent element</p>
    <div id="child">
        <p>This is child element</p>
    </div>
</div>

CSS

  • Example of measurement unit in pixels
#parent {
  width: 700px;
  border: 1px solid black;
}

#child {
  width: 900px;
  border: 1px solid red;
}

This will produce the following result −

pixels

  • Example of measurement unit in em
#parent {
  width: 700px;
  border: 1px solid black;
  font-size: 20px;
}

#child {
  width: 700px;
  border: 1px solid black;
  font-size: 2em;
}

This will produce the following result −

em

  • Example of measurement unit in rem
#parent {
  width: 700px;
  border: 1px solid black;
  font-size: 1rem;
}

#child {
  width: 700px;
  border: 1px solid black;
  font-size: 2rem;
}

This will produce the following result −

rem

  • Example of measurement unit in percentage
#parent {
  width: 50%;
  border: 1px solid black;
}

#child {
  width: 90%;
  border: 1px solid black;
}

This will produce the following result −

percentage