Pixels and Percentages
Let's take a look at pixel and percentage units.
We'll cover the following
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
Get hands-on with 1200+ tech skills courses.