CSS - Relative Sizing (Length)

About

Relative Sizing is when you are using a length units that is relative to another length property.

Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).

Example

With font-size

The base size is set on the body with a value of 15 pixel

body {
  font-size: 15px;
}

Every p.x element will show x times the size of its body parent

p.base1 { font-size: 1em } /* ie 1em = 1 * 15px = 15 px */
p.base2 { font-size: 2em } /* ie 2em = 2 * 15px = 30 px */

The html code

<p class="base1">15px text</p>
<p class="base2">30px text</p>

Output:

Rendered by WebCode

Management

Base Size

The base size is generally set on the body

Example with the font-size:

body {
  font-size: 15px;
}

List

Relative units are:

em: the font-size of the element (of its parent)
rem: font size of the root element of the document.
ex: the 'x-height' of the relevant font
px: logical pixels, relative to the viewing device
%: percentage from another value
sizes relative to the reader's window:
- vw : 1/100th of the viewport's width
- vh. 1/100th of the viewport's height.
- vmin the smallest of vw and vh.
- vmax the greatest of vw and vh

Example:

h1 { margin: 0.5em }      /* em */
h1 { margin: 1ex }        /* ex */
p  { font-size: 12px }    /* px */

em

The emphemeral unit (em) is relative to the current font size and specify the number of characters.

ie 10em = 10 characters.

More CSS - Emphemeral unit (em | equal M)

rem

rem is the font size of the root element of the document.

ex

The 'ex' unit is defined by the element's first available font. The 'x-height' is so called because it is often equal to the height of the lowercase “x”. However, an 'ex' is defined even for fonts that don't contain an “x”.

x-height

The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristics is to look at how far the glyph for the lowercase “o” extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em should be used.

Example(s):

The rule	Means That
`h1 { line-height: 1.2em }`	the line height of “h1” elements will be 20% greater than the font size of the “h1” elements.
`h1 { font-size: 1.2em }`	the font-size of “h1” elements will be 20% greater than the font size inherited by “h1” elements

When specified for the root of the document tree (e.g., “HTML” in HTML), 'em' and 'ex' refer to the property's initial value.

px

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display.

percentage

CSS - Percentage Value - each element defines to which the percentage refers

vw

vw is 1/100th the viewport width.

vh

vh is 1/100th of the viewport height

vmin

vmin is the smallest of vw and vh.

vmax

vmax is the greatest of vw and vh.

Inheritance / Computation

Child elements do not inherit the relative values specified for their parent; they inherit the How to get the CSS computed style values of an HTML element|computed values]].

Example(s):

In the following rules, the computed 'text-indent' value of “h1” elements will be 36px, not 45px, if “h1” is a child of the “body” element.

body {
  font-size: 12px;
  text-indent: 3em;  
}
h1 { font-size: 30px }
/* text-indent: 3em;  /* i.e., 36px = 3 * 12px, not 3 * 30px */

<h1>Title</h1>

Rendered by WebCode