greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/english/css/units/index.md

5.6 KiB
Raw Blame History

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:
    div {
  font-size: 16px;
}
div h3 {
  font-size: 2rem;
}
    Here the <h3> will equal 32px since the font-size of the current or parent element is 16px.
  • rem
    • root em, or the width of a capital letter M of the default base font-size.
    • Parent font sizes will have no effect.
    • Example:
    body {
  font-size: 16px;
}
p {
  font-size: 1.5rem;
}
    Here the <p> will equal 24px since the default base font-size is 16px.
  • %
    • the percent size relative to a parent's size.
    • Example:
    div {
  width: 400px;
}
div p {
  width: 75%;
}
    Since the parent's width is 400px, the width of the inner pargraph would be 300px, or 75% of 400px.
  • vw
    • view width, or 1/100th of the width of the viewport
    • Example:
    body {
  width: 100vw;
}
    The 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:
    div {
  height: 50vh;
}
    This 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.

More Information: