CSS - Relative Sizing (Length)
Table of Contents
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:
Management
Base Size
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:
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.
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 |
---|---|
| the line height of “h1” elements will be 20% greater than the font size of the “h1” elements. |
| 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>