Pixels and Percentages

Pixels

.element {   
  width: 500px;  
}

Pixels are the most common measurement unit, which allow us to set a length in pixels. Interestingly, they don’t have anything to do with the literal pixels of your display device. Rather, it’s a standardization of measurement used across the web.As we’ll see, pixels lack flexibility in some scenarios, so there’s often a better option.

Percentages

Percentages let us specify values as a percentage, relative to the same property in the element’s parent. See an example below:

.parent {
  width: 600px;
}

.child {
  width: 50%;  /* 300px */
}

For example, if an parent element has a width of 600px, and a child is created with a width of 50%, it will render at 300px.

Example