Sideway
output.to from Sideway
Draft for Information Only

Content

CSS Length Dimension
 Dimension of Length
 Unit of Length
  Absolute Unit
     in
   cm
   mm
   Q
   pt
   pc
  Variable Unit
   px
  Relative Unit
   em
   ex
   ch
   ic
   cap
   %
   rem
   lh
   rlh
   vw
   vh
   vmin
   vmax
  Unitless

CSS Length Dimension

sources: https://www.w3.org/Style/Examples/007/units.en.html updated 27Dec2018
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units updated 27Dec2018
https://www.w3.org/TR/css-values-4/ updated 27Dec2018

Dimension of Length

CSS only provides the unit of expression for expressing the dimension length. In general, output media can be divided into soft scalable display and hard fixed printout. Although there are a number of different units can be used, some of them may not be suitable for using in some output media because of the properties of output media.

Unit of Length

The units used for expressing length in CSS are in, cm, mm, pt, pc

Absolute Unit

An absolute unit is a hard fixed dimension, that is the dimension used in CSS is the same as everywhere eles. However the accuracy of the output is still highly depending on the resolution of the output media. For example, the output presentation may be different from a low-resolution handheld screen to a high-resolution desktop display. Therefore an absolute unit in CSS is mainly used for high-resolution display or printed output media. Document with absolute unit of hard fixed dimension is not suitable for soft scalable output media to which document with  relative unit of soft scalable dimension will work much better. The common absolute units are in, cm, mm, pt, and pc. Therelation between these absolute units is 1in=2.54cm=25.4mm=72pt=6pc.

  in

The 'in' stands for inch is a unit of length in the imperial/US unit system and is equal to 2.54cm in the metric system.

'in' equal to 25.40mm.

cm

The 'cm' stands for centimeter is a unit of length in the metric/SI unit system and is equal to one hundredth of a meter.

'cm' equal to 10.00mm

mm

The 'mm' stands for millimeter  is a unit of length in the metric/SI unit system and is equal to one thousandth of a meter.

'mm' equal to 1.00mm

Q

The 'Q' stands for quarter millimeter is the smallest measurement unit of length in CSS and is equal to one quarter of a millimeter.

'Q' equal to 0.25mm

pt

The 'pt' stands for point is the smallest measurement unit in typography and is equal to 1/72 of an inch. In order words, 72 points equal to an inch or 12 points equal to a pica.

'pt' equal to 0.35mm

pc

The 'pc' stands for pica is a typographic unit in typography and is equal to approximately 1/6 of an inch or 1/72 of a foot. In order words, 6 picas equal to an inch or a pica equals to 12 points.

'pc' equal to 4.23mm

Variable Unit

A variable unit is an abstract relative unit depending on the output media.The common variable unit is pixel. Pixel is a visual measurement unit in related to the resolution of the output media. The pixel measurement unit is usually not directly refering to the phsical dimension of the device pixel because both pixel resolution and physical dimension of the output media may not be the same. In general, a pixel refers only to a part of a physical visual dot on the output media, and the user agent will rescale the pixel unit to the corresponding value according to the pixel density of the output media by relating either the physical units to their physical measurements, or the pixel unit to the reference pixel.

px

The 'px' stands for pixel is a visual meaurement unit in visual media. A reference pixel is equal to approximately 1/96 of an inch or 0.26mm. In order words, 96 pixels equal to an inch (96dpi) or 100 pixel equals to 26mm. The reference pixel is defined by refering to an accepted standard by placing an output media with a pixel density of 96dpi at a reading distance of 28 inches with visual angle about 0.0213 degrees.

Relative Unit

A relative unit is a dimenionless measurement unit with reference to an assigned absolute reference unit. In other word, the user agent will rescale the relative unit to the corresponding value refering to the assigned absolute reference unit accordingly. The common relative units are em, ex, and rem.

em

The 'em' unit is a font-relative length unit with reference to the font-size of the current element, that is the width of the capital letter M. Font sizes are inherited by elements from their parents.

ex

The 'ex' unit is a font-relative length unit with reference to the x-height of the current element, that is the height of the lower case letter x. Font sizes are inherited by elements from their parents.

ch

The 'ch' unit is a font-relative length unit with referenece to the 0-width of the current element, that is the width of the number 0 (U+0030).  Font sizes are inherited by elements from their parents.

ic

The 'ic' unit is a font-relative length unit with referenece to the 水-width of the current element, that is the width of the number 水 (U+6C34).  Font sizes are inherited by elements from their parents.

cap

The 'cap' unit is a font-relative length unit with referenece to the nominal capitalletter height of the current element, that is the nominal height of capital letters.  Font sizes are inherited by elements from their parents.

%

The '%' unit stands for percentag and is a dimensionless ratio unit with reference to the one hundredth of the value of the current element, that is 1/100 of the value of the current element.

rem

The 'rem' unit stands for root em and is a font-relative length unit with reference to the font-size of the root base element of the document, that is the width of a capital letter M. Besides 'rem' always refer to the font-size of the base font-size only, and will ignore any inherited font sizes.

lh

The 'lh' unit is a element-relative length unit with referenece to the line height of the current element. 

rlh

The 'rlh' unit stands for root lh and is a element-relative length unit with referenece to the line height of the root element as in rem. 

vw

The 'vw' unit is a viewport-relative length unit with referenece to the one hundredth width of the viewport, that is the 1/100  of viewport width (inline axis). 

vh

The 'vh' unit is a viewport-relative length unit with referenece to the one hundredth height of the viewport, that is the 1/100  of viewport height (block axis). 

vmin

The 'vmin' unit is a viewport-relative length unit with referenece to the one hundredth of the smaller dimension of the viewport, that is the 1/100  of viewport's smaller dimension. 

vmax

The 'vmax' unit is a viewport-relative length unit with referenece to the one hundredth of the larger dimension of the viewport, that is the 1/100  of viewport's larger dimension. 

Unitless

Sometime unitless numeric values can also be used in CSS as a genetic unit with value of one unit of the corresponding unit.
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<link rel="stylesheet"  type="text/css" href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:300,300i,400,400i,700,700i">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {font-size:6pt; font-family: "IBM Plex Serif"}
</style>
<title>Sample Page</title>
    </head>
    <body>
M
<div>M</div>
<div style="font-size:1rem;">M</div>
<div style="font-size:6pt;background-color:cyan;"">M
<div style="font-size:1rem;background-color:yellow;width:0.167in;height:12pt"">M</div>
</div>
<div style="font-size:1em;border:1px solid black">M
<div style="font-size:12pt;background-color:cyan;width:0.167in;height:12pt">M</div>
<div style="font-size:12pt;background-color:red;width:0.334in;height:12pt">M</div>
<div style="font-size:12pt;background-color:yellow;width:24pt;height:12pt">M</div>
<div style="font-size:2em;background-color:cyan;width:2em;height:2em">M</div>
<div style="font-size:1rem;background-color:yellow;width:1rem;height:1rem">M</div>
Mx
<div style="font-size:2ex;background-color:cyan;width:2ex;height:2ex">x</div>
<div style="font-size:2ex;background-color:cyan;width:2ex;height:2ex">n</div>
<div style="font-size:1em;background-color:cyan;width:2ex;height:2ex">x</div>
<div style="font-size:12pt;background-color:cyan;width:2ex;height:2ex">M</div>
</div>
    </body>
</html>
Code Input:

not support


©sideway

ID: 181202702 Last Updated: 27/12/2018 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 7

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 149

Software

Application 187

Digitization 24

Numeric 19

Programming

Web 761

CSS 1

ASP.NET 1

Regular Expression 1

HTML

Knowledge Base

Common Color 1

Html Entity (Unicode) 1

Html 401 Special 1

OS 389

MS Windows

Windows10 1

.NET Framework 1

DeskTop 7

Knowledge

Mathematics

Formulas 8

Algebra 20

Number Theory 206

Trigonometry 18

Geometry 18

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Physics

Electric 11

Biology 1

Geography 1


Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 06 September 2019