Absolute length units are probably the most familiar to those just starting out. An absolute length is a static measurement that is not defined by another element or the viewport. Like inches or feet in the real world, absolute values within CSS operate much the same way.
The first and most common absolute element is the pixel. Before we dive in to our first unit, remember that pixels, in terms of measurements, have no relation to screen pixels and should be considered different.
Notated as px in CSS, pixels are a unit of measure that are great for setting fixed font sizes, heights, widths, borders, letter spacing and media queries to our elements. These values will not change when the browser window is resized.
Pixels are not the only absolute length value, but they are by far the most common. Other absolute units include points (pt), millimeters (mm), centimeters (cm) and inches (in), but none of these have any advantage to pixel and are not commonly used.
Relative length units are font-relative
. This means that the actual length is determined by the font-size of the element. Relative length units are great because the fluidity in sizes allows us to create smooth, scalable layouts. This is extremely important in responsive web design.
There are numerous relative length values. I have highlighted a few them below and also provided a few instances of when I would use them.
An em's size is determined from the inherited font-size of its parent element. With em we are not limited to strictly defining font sizes, but it is also common practice to use em to define margins, padding and line-heights.
Remember, if a font size is not defined then the em unit's size will inherit the base font size of its nearest parent element.
Assuming there is no outside properties influencing the CSS, an element with a font-size of 20px and a width of 5em. Knowing that one em is equal to the defined font-size of 20px, we can determine the width of the element in pixels. The element's width is actually 100px (20px*5em=100px). Still don't understand? Click here for an example.
rem, or root em, are extremely similar to em units in the sense that their size is determined based on another element's defined font-size.
In the case of rem, the size is defined from the root element within our CSS, while em size is inherited from the nearest parent element.
Here you can see that our rem font size is slightly larger than than the em font size. Although both font sizes are 2.8, the rem font size is derived from the root element in our CSS, which is our html element. Alternatively, the em font size is based upon it's parent element font size of 16px.
Percentages, notated as %, are an extremely common CSS length. Although not technically a length unit, percentages have a wide variety of uses and are most closely related to relative length units.
Percentages are great for creating fluid web pages that change and adjust given the user's viewport and window size. The flexibility of percentages help tremendously when working to create a responsive website.
If you resize your window you will notice that the box with a width of 40px will not adjust with your window, while the box with a width of 90% will scale horizontally with your window.
You can also use percentages as a font size. Here you can see an example of a defined font size of 26px. The font size is then given a property to increase its size to 200%. Using a percentage in this case essentially increases the font size to 52px (26px*200%=52px).
This entire page is made up of a combination of these elements. See if you can find which elements are absolute and which are relative!