5.6 KiB
title |
---|
Units |
Units
Many CSS properties like width
, margin
, padding
, font-size
etc. take length. CSS has a way to express length in multiple units. Length is a combination of a number and unit with no whitespace. E.g. 5px
, 0.9em
etc.
Length
Common Length units
There are several units used by CSS to express length. The older ones, supported by all browsers, are:
- rem - "r" stands for "root": "root em" -, which is equal to the font size fixed to the root element (almost always
<html>
). - vh and vw - Many responsive web design techniques rely heavily on percentage rules. However, CSS percentage measures are not always the best solution for all problems. The measure vh is equal to 1/100 of the height of the viewport. So, for example, if the height of the browser is 800px, 1vh equals 8px and, similarly, if the width of the viewport is 650px, 1vw is equivalent to 6.5px.
- vmin and vmax - These units are related to the maximum or minimum value of vh and vw. For example, if the browser was set to 1200px wide and the height 600px, 1vmin would be 6px and 1vmax would be 12px. However, if the width was set to 700px and the height set to 1080px, vmin would equal 7px and vmax 10.8px.
- ex and ch - These units, similar to em and rem, rely on the current font and font size. However, unlike em and rem, these units also rely on
font-family
as they are determined based on measures specific to each font. The ch unit ("character unit") is defined as the width of the character zero ("0"). The ex unit is defined as "the current x-height of the current font or the half of 1em". The height-x of a given font is the height of the lowercase "x" of that font. It is often the middle mark of the font.
Unit | Description |
---|---|
em | 1 em is the computed value of the font-size on the element on which it is used. |
ex | 1 ex is the current font’s x-height. The x-height is usually (but not always, e.g., if there is no ‘x’ in the font) equal to the height of a lowercase ‘x’ |
ch | 1 ch is the advance of the ‘0’ (zero) glyph in the current font. ‘ch’ stands for character. |
rem | 1 rem is the computed value of the font-size property for the document’s root element. |
vw | 1vw is 1% of the width of the viewport. ‘vw’ stands for ‘viewport width’. |
vh | 1vh is 1% of the height of the viewport. ‘vh’ stands for ‘viewport height’. |
vmin | Equal to the smaller of ‘vw’ or ‘vh’ |
vmax | Equal to the larger of ‘vw’ or ‘vh’ |
There are two general kinds of units used for length and size in CSS: relative and absolute.
Relative Units
Relative units change relative to the element's current font-size or other settings. Some relative units are
em
- the width of a capital letter M of the
font-size
of the current element. - Font sizes are inherited from parent elements.
- Example:
Here thediv { font-size: 16px; } div h3 { font-size: 2rem; }
<h3>
will equal32px
since thefont-size
of the current or parent element is16px
.- the width of a capital letter M of the
rem
- root
em
, or the width of a capital letter M of the default basefont-size
. - Parent font sizes will have no effect.
- Example:
Here thebody { font-size: 16px; } p { font-size: 1.5rem; }
<p>
will equal24px
since the default basefont-size
is16px
.- root
%
- the percent size relative to a parent's size.
- Example:
Since the parent's width isdiv { width: 400px; } div p { width: 75%; }
400px
, the width of the inner pargraph would be300px
, or 75% of400px
.vw
- view width, or 1/100th of the width of the viewport
- Example:
Thebody { width: 100vw; }
body
fill the width of the viewport, whether that is 417px, 690px, or any width.vh
- view height, or 1/100th of the height of the viewport
- Example:
Thisdiv { height: 50vh; }
div
will fill half the height of the viewport, whether that is 1080px, 1300px, or any height.
Absolute Units
Absolute units will be the same regardless of screen size or other settings. Some absolute units are
px
- pixel
- pixel counts are relative to the quality of the viewing device's screen
in
,cm
,mm
- inch, centimeter, millimeter
- An inch is an inch on a small screen or a big screen
pt
,pc
- points (1/72 of an inch) and picas (12 points)
Example
p {
font-size: 24px;
}
div {
width: 3in;
border-width: 3pt;
}
A paragraph with font-size: 24px
will show up as 24px on a phone, tablet, or desktop screen.
The div
will show up as 3 inches wide, and the border
on the div
will be 3/72 of an inch thick, regardless of the screen size.