Skip to Main Content or Page Contents

CSS Size Units - absolute, relative & responsive

Using the various absolute & relative size units. px, em, rem, %, vh, vw, etc.

Results per page:

Match: any search words all search words

This Page's Contents

 

 

Absolute Units of Measurement

cm

in

mm

pc

pt

px

 

Relative Units of Measurement

em

ex

ch

rem

vh

vw

vmin

vmax

%

 

Responsive Design

html CSS Units of Length Introduction

CSS How to measure Length Introduction

  • CSS has several different units for measuring length & height.
  • These units are used to impart size to CSS properties such as width, margin, padding, font-size, border-width & many more.
  • The size is a number followed by a length unit, such as 12px, 2em, 100%. etc.
    • Do not place whitespace, between the number & the unit: e.g.
      • div {width: 12 px;} is wrong.
      • div {width: 12px;} is correct.
    • The unit name must always be used except when the length is 0 (zero), then the unit may be omitted if e.g. p {padding: 0;}
  • Some CSS properties can have negative lengths such as: margin, left, right, top, bottom, box-shadow, z-index, & more

Absolute Units of Measurement

px


Used to be the most popular unit of measurement for the web. And usually taught to beginners learning CSS. With the advent of both mobile phones & also very large screens has resulted in a responsive revolution. A responsive site allows the design to respond to the users screen size. Responsive design requires some usage of Relative Units

Pixels (1px = 1/96th of 1in)

Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one pixel (dot) of the display. For printers and high resolution screens 1px may be multiple pixels on that device.

cm


centimetres. Mainly used for print. 

mm


millimetres. Mainly used for print.


in


inches (1in = 96px = 2.54cm). Mainly used for print.

pt


points (1pt = 1/72 of 1in). Mainly used for print.

pc


picas (1pc = 12 pt = 1/6in). Mainly used for print.

Relative Units of Measurement

 

em


  • Relative to the font-size of the parent element (2em means 2 times the size of the parent font)
  • If the text size of the parent element often body is 16 pixels, then
    • 1em will be 16 pixels (1 * 16 = 16).
    • 1.5em will be 24 pixels (1.5 * 16 =24).
    • 0.5em will be 8 pixels (0.5 * 16 =8).

Cons em sizes cascade, which may result in unexpected sizes

rem


1 rem is the computed value of the pixel font-size property for the parent elements usually the <html> element.

  • If font-size of the <html> is set to 16px,
    • a setting of 0.75rem font-size on <p> elements would compute to 12px (16 x 0.75 = 12px)
    • a setting of 1.5rem on <h2> elements would compute to 24px (16 x 1.5 = 8px)
    • Unlike em, rem does not have the problem of multiple computing of the size caused by nesting of elements
  • By changing the pixel size in the HTML element, all rem sizes throughout the document will automatically change. Ideal for Responsive documents.
    • This is easily done with Media queries

    Example:
    @media only screen and (max-width: 700px
    {
    html { font-size: 14px; }
    @media only screen and (max-width: 640px)
    {
    html { font-size: 12px; }
    }

REM will not work in old browsers IE 8, Safari 4, or IOS 3.2.

%


Percentages units allow the sizing of elements relative to their containing block.

If the text size of body is 16 pixels, then 150% of 16 will be 24 pixels (150% * 16).

vh


Relative to 1% of the width of the viewport

vw


vh: 1% of viewport height

vmin


Relative to 1% of viewport's smaller dimension

Internet Explorer 9 supports vmin with the nonstandard name: vm.

vmax


Relative to 1% of viewport's* larger dimension

Internet Explorer 9 Not supported

ex

Based on the height of the letter x. Dramatically changes with different fonts. Very rarely used

ch


ch stands for character. Relative to width of the "0" (zero) glyph. Very rarely used. Ideal for sizing monotype fonts

Responsive Design

 


© tutorials4u.com
HTML Tutorial by John McGuinn.