css

CSS gives web developers plenty of options when it comes to defining lengths for HTML elements. In a broad sense, defining lengths in CSS can be broken down in to two categories: using absolute versus relative units.

Absolute units are probably most commonly done with pixel lengths with the familiar px unit. Other absolute length units exist (e.g., mm, q, cm); however, these units are far less common. You can familiarize yourself with various absolute units by clicking here.

Relative units can be a bit trickier to understand than absolute units, but their benefits are undeniable. Throughout the remainder of this article, I’ll show you some of the more common relative units in CSS and how to use them. I’ll provide some examples in order to demonstrate their behavior. As Einstein most assuredly never said, “It’s all relative, baby!” 😉

CSS Relative Units

Relative to the Parent Element

Relative to a parent element’s defined length, there’s the percentage unit (%). The percentage unit is relatively straightforward (same as percents when you learned them in school). To get an ideao fo how percentage units work, let’s say you have a parent div element that has one child div contained within it. If you set the parent div’s width to 100px, and the child div’s width to 50%, then the child div’s width will render to 50px; 50% of it’s parent div’s width. Imagine now that you have the parent div also set to 50% width (assuming that the body element is the parent of the parent div here)… with that setup, the parent div’s width will be 50% of your document’s body’s width, and the child div’s width (set to 50% as well) will be half of that. So the child will be half the width of the parent that’s half the width of the body. All of that allows for responsive web design where elements on the page will change widths (or heights or other properties) depending on the size of the browser window.

Here it is in action:

See the Pen wzqGjg by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

(make sure to adjust your browser/window size to see it in action).

Relative to the Browser/Window/Viewport

Relative to the size of the browser window (also known as the viewport); are viewport units (vw and vh). These relative units work similarly to percentage units; 1 v unit is equal to 1% of the viewport’s length. So if you were to assign a p element a width of 50vw, doing so would effectively set the p element’s width to half of whatever your browser window’s width is. Likewise, setting a p element’s height to 50vh would make it so that the element’s height is always 50%, or half, of your browser’s height. You can also set the width to vh and the height to vw, if you so choose. Doing so would tie an element’s width to the height of the viewport and its width to the viewport’s height. And just like with percentage units, viewport units allow for responsive web design (i.e., allowing HTML elements to respond to different devices; different screen widths and heights).

Here is an example of viewport units in action:

See the Pen ozZxdK by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

(make sure to adjust your browser/window/viewport size to see it in action).

Relative to Font Size

Finally, in addition to percentage units and viewport units, there are font-size relative units. These units are em, rem, ch, and ex. Em is relative to the calculated font-size of an element (typically, default is 16px). Rem refers to the font-size of a document’s root element (typically the <html> element). Ch refers to the width of the glyph 0. And ex refers to the x-height of an element’s font. Em and rem tend to be more common the ch and ex, but each have their advantages and disadvantages. Using multipliers in front of the font relative units works as you would expect (e.g., if font-size is 16px, then 2em is 32px).

Here’s an example of em and rem in action:

See the Pen pEAyKa by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Conclusion

When using CSS to control the length of HTML elements, a distinction an be drawn between absolute and relative units. Relative units allow for adaptable lengths and responsive web design. Relative units can be broken down in to three unit groups: percentages, viewport, and fonts. Percentage units rely on the lengths of parent elements, viewport units rely on the dimensions of the browser window, and font relative units rely on the font size of parent or root elements.

More information about the relative units discussed here can be found on Mozilla’s Developer Network page.

Comments