Part 1 | Getting Started
8. CSS Units of Measure
This section covers CSS units of measure including pixels, ems, and percentage values as they relate to the dimensions of HTML elements. CSS supports a variety of units of measure to define length or size in property values. Let’s examine some different values of measure as they relate to font-size, width, height, margin and padding of HTML elements and CSS selectors.
– “Whatever you are, be a good one.”
CSS Units of Measure
Let’s examine some CSS properties and values related to units of measure that define lengths. There are two types of unit lengths, absolute and relative. Absolute lengths are normally defined with pixels. Relative lengths can be defined with a variety of values including percentages (%), em, rem, vw, and vh.
Pixels (px) | CSS for Box Model 3
Pixels are fixed units of length associated with screen media. The size and resolution of a video display is determined by the number of pixels horizontally and vertically aligned in the display screen. Most designers are familiar with pixels, and therefore they are commonly used to define absolute lengths of HTML elements and CSS selector property values.
A class selector and associated CSS property values using pixels to define size might include the following:
<div class=”box-1-pixels”>Box 1</div>
.box-pixels{
width: 90px;
height: 90px;
padding: 10px;
margin-top: 10px;
margin-bottom: 0px;
border: 1px solid aqua;
font-size: 12px;
}
“EMs” (em) | CSS for Box Model 3
An em is a relative unit of length. 1 em is equal to the default font size. Therefore, if no font-size property is defined, the browser default font-size of 16px equals 1em. So by default 1em = 16px, 1.5em = 24px, 2em = 36px, etc.
Since 16 is not an easy denominator to work with, many Web designers assign a default font-size: 62.5% to the <body> tag or parent elements in a style sheet to make 1em equaling 10px. This allows us to assign em values with tenths where 1em = 10px, 1.2em = 12px, 1.6em = 16px, etc.
Using a percentage value of 62.5% rather than simply assigning 10px, allows the em value to maintain scalability in the cascade.
EMs can also be used to define any other length in CSS property values including height, width, margin and padding. Many elastic width and mobile responsive site layouts use EMs extensively to achieve more consistent results in the size and distance relationships of elements on different device screens.
Using EMs has one major drawback, em values compound in size thoughout the CSS cascade in nested HTML elements.
For example, if an <li> (list item) has a font-size value of 1.2em that equals 12px, a nested <p> (paragraph) assigned a font-size value of 1.2em will not equal 12px. Instead it will be 1.2 x 12px. or 14.4px. This compounding occurs for all size values using EMs not just font-size. Therefore, using EMs in complex layouts can be quite challenging.
“REMs” (rem) | CSS for Box Model 3
An alternative to using EMs is REMs. The rem unit is the same as an em, except it is based on the “Root” font size of the HTML document and it does not compound through the cascade. Therefore, if the <HTML> tag is assigned a font-size property of 62.5%, all em values will render the equivalent of 10px for every 1 rem regardless of the em values of their parent HTML elements. Like EMs, if no font-size property is specified, then 1em = 16px by default in most browsers. REMs provide the same scalability as EMs across different device screens without undesirable size compounding in nested elements. REMs have only recently been supported by most major browsers and are not supported in IE10 and IE11. Since Internet Explorer is basically dead – who cares. Use REMs.
A class selector and associated CSS property values using EMs to define size might include the following:
<div class=”box-2-ems”>Box 2</div>
.box-2-ems{
width: 18em;
height: 18em;
padding: 1.2em;
margin-top: 1.2em;
margin-right: auto;
margin-bottom: 0em;
margin-left: auto;
font-size: 1em;
{
A great resource for working with EM’s is the Pixels to EMs Calculator developed by Brian Cray.
Figure 4 | Pixels to EMs Calculator
Percentages | CSS for Box Model 3
Percentage values are fluid units of measure for HTML elements and CSS selectors. Percentage values cascade (and compound as their name suggests) based on the size of their parent elements and the browser viewport. Layout elements such as <div> tags often use percentage values to achieve elastic and mobile responsive layouts.
For example, if you have two columns floating side by side inside the document <body> where column-1 is 60% and column-2 is 40% they will both scale in width to maintain a 60/40 size relationship regardless of the browser window size. For this reason, percentage values are ideal for assigning widths to layout elements in CSS. We will explore the use of percentages to create elastic and/or mobile responsive layouts in more detail later in the guide.
A class selector and associated CSS property values using percentages to define size might include the following:
<div class=”box-3-percentages”>Box 3</div>
.box-3-percentages{
width: 75%;
height: 75%;
padding: 4%;
margin-top: 4%;
margin-bottom: 0%;
font-size: 100%;
{
The Parent Element | CSS for Box Model 3
In this example, the outer box assigns the pixel equivalents for EM’s as the top HTML parent element in the CSS cascade. The font-size property is set to 62.5% to make 1em = 10px.
<div class=”box-4-parent-element”>Box 4</div>
.box-4-parent-element{
width: 360px;
height: 360px;
padding: 12px;
margin-top: 12px;
margin-bottom: 0px;
font-size: 62.5%;
}
Viewport Widths & Viewport Heights (vw/vh)
Another set of relative lengths in CSS are viewport width (vw) and viewport height (vh). These values equal 1% of the width (or height) of the device viewport. Therefore, an <h1> header with a font-size: 10vh; will always be 10% of the height of any viewport or browser window. However, these values are not 100% supported by all browsers. Some designers opt to use them for highly scalable height, but also include a second (fallback) font-size property using another value in case they are not supported.
Which Unit of Measure? | Figure 5
So, what unit of measure should you use? Pixels is the easiest to work with for beginners because most designers can easily visualize them. Pixels are ideal for static Web pages layout elements, but do not provide scalability for mobile responsive and elastic layouts. Pixels may also render text too small on newer mobile device screens that have a high pixel density. Most advanced Web designers and framework developers use em/rem for font properties and a combination of pixels and percentages for layout element properties to create mobile responsive style sheets. However, percentage values can also render text sizes very consistently over many browsers and device screens.
Figure 5 | Units of Measure for Page Layout
| Unit of Measure | Static Layouts | Elastic Layouts | Mobile Responsive Layouts |
|---|---|---|---|
| width: | pixels | percentage | pixels or percentage |
| height: | pixels | pixels | pixels |
| margin: | pixels | pixels or percentage | em/rem or percentage |
| padding: | pixels | pixels or percentage | em/rem or percentage |
| font-size: | pixels or em/rem | pixels or em/rem | em/rem or percentage |
| line-height: | pixels or em/rem | pixels or em/rem | em/rem or percentage |
| letter-spacing: | pixels or em/rem | pixels or em/rem | em/rem or percentage |
HTML for Box Model 3 | CSS Units of Measure
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" href="css-for-box-model-3.css">
</head>
<body data-rsssl=1>
<div class="box-4-parent-element">Box 4
<div class="box-3-percentages">Box 3
<div class="box-2-ems">Box 2
<div class="box-1-pixels">Box 1
</div>
</div>
</div>
</div>
</body>
</html>
CSS for Box Model 3 | CSS Units of Measure
@charset "UTF-8";
/* CSS Document */
.box-1-pixels{
width: 90px;
height: 90px;
padding: 12px;
margin-top: 12px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid aqua;
text-align: center;
background-color: black;
color: white;
font-size: 10px;
font-family: Helvetica, Arial, "sans-serif";
}
.box-2-ems{
width: 18em;
height: 18em;
padding: 1.2em;
margin-top: 1.2em;
margin-right: auto;
margin-bottom: 0em;
margin-left: auto;
border: 1px solid #00ffff;
text-align: center;
background-color: #666666;
color: #ffffff;
font-size: 1em;
font-family: Helvetica, Arial, "sans-serif";
}
.box-3-percentages{
width: 75%;
height: 75%;
padding: 4%;
margin-top: 4%;
margin-right: auto;
margin-bottom: 0%;
margin-left: auto;
border: 1px solid rgb(0,255,255);
text-align: center;
background-color: rgb(136,136,136);
color: rgb(255,255,255);
font-size: 100%;
font-family: Helvetica, Arial, "sans-serif";
}
.box-4-parent-element{
width: 360px;
height: 360px;
padding: 12px;
margin-top: 12px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid rgba(0,255,255,1);
text-align: center;
background-color: rgba(0,0,0,.2);
color: rgba(0,0,0,1);
font-size: 62.5%;
font-family: Helvetica, Arial, "sans-serif";
}Proceed to the next part of the guide if you feel you have a solid understanding of the topics covered so far. Review the related links to study these concepts in more detail.
Web Design Tools & Resources