Measurements in CSS
In CSS, you may want to define measurements for elements such as font size, height, width, curvature, thickness etc. There are multiple ways to define measurements, so let's look at a few.
Notation
CSS measurement values are written as a number followed by the unit (with no spaces in-between). Example: 20px
.
Negative numbers are ignored (except for padding
and margin
properties) and are considered 0. Decimal values are accepted.
Absolute measurements
The measurement units have absolute values, meaning they do not change no matter the system, browser or screen size. There are a few that we use in our daily lives:
mm
(millimeters)cm
(centimeters)in
(inches)
They can be converted between as follows:
1cm = 1000mm
1in = 2.54cm
There are a few more absolute measurements:
px
(pixels) - width of a pixel on the screenpt
(points) - often used for font size; similar to font size values on MS Wordpc
(picas) - a typographic unit, similar topt
They can be converted to other units as follows:
1in = 96px
1in = 72pt
1pc = 12pt
Note that pt
and pc
, while supported, are not very commonly used as a unit of measurement in CSS. px
is the most commonly used, followed by mm
and then cm
and in
to a much lesser extent.
The nature of being absolute measurements means that regardless of the computer specs, screen size, browser width/type, resolution, size of other elements, etc. the values correspond to constant sizes. This means that 100px
measures the same physical distance whether its on Safari or Chrome, whether its on an old iPhone 3 or an 80 inch 4K ultra TV screen, whether the browser is max size or resized to half.
Relative measurements
Far more common (and in some ways better) than absolute measurements are the relative measurement units. These units are relative to some or the other size, and they will differ based on these dimensions. Let's take a look a few of them:
%
- this is relative to the size of the parent element as a percentage (i.e. 45% means 45% the width of the parent element)em
- this is relative to the font size of the current element;2em
means 2 times the font sizerem
- this is relative to the font size of the root element;2rem
means 3 times the font size of the rootvw
- this is relative to the width of the viewport;1vw
means 1% the width of the viewport[vh
- this is relative to the height of the viewport;1vh
means 1% the height of the viewport
The viewport is the browser window; resizing the browser window changes the dimensions of the viewport
Difference between absolute and relative units
The following two figures demonstrate the difference between absolute and relative measurements. Note how the element size changes as the browser window is resized. Note that
The screen is 1440px wide
The browser window initially takes up the entire screen
50vw is 50% the width of the browser, or 1440/2 = 720px. This means the two orange boxes initially have the same width.
Next steps
We'll look at the box model for elements to introduce padding
and margin
, before we finally begin adding CSS to the page.
Last updated