CSS - Relative Sizing (Length)

Boxdim

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

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>





Discover More
Boxdim
CSS - Emphemeral unit (em | equal M)

The emphemeral unit (em) is a relative size to the default font-size set in a browser (=16px on windows) A font-size of 0.875em translates to 87.5% of the default fontsize of the browser. To simplify:...
Boxdim
CSS - (Length) Unit

CSS The unit in CSS is the second element of a length that defines the type of the length number. Example: px, em, etc ... The recommended unit scales are: Screen: rem, em, px, % Print:...
CSS - Font

This page is font in CSS and html. From a web perspective, a font is considered to be a media resource and can be included in any page from any origin. the font-size is set on the body to be able...
CSS - font-size property

CSS CSS font-size in CSS is a property that defines the length (size) of a font. font-size by himself is an element of typography. responsive typography The font-size uses generally a relative...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective



Share this page:
Follow us:
Task Runner