CSS Lengths

Length value in CSS

A length in CSS is defined by concatenating the number of units and the unit identifier together. For example, 5cm means 5 cm (centimeters). 20pt means 20 pt (points).

CSS defines two kinds of length unit:

absolute
relative to another property

Absolute units of measurement

The cm and pt units are examples of absolute units. These units are real-world measurements. CSS supports five types of absolute units

Unit Identifier	Description
in	Inches
cm	Centimeters
mm	Millimeters
pt	Points (1 point is 1/72 of an inch)
pc	Picas (1 pica is 12 points)

You can mix and match units.


<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        p { <!--from   ww  w. j a v  a 2  s.co  m-->
            width: 5cm; 
            font-size: 20pt; 
        } 
        </style> 
    </head> 
    <body> 
        <p>I like <span>HTML</span> and CSS. java2s.com</p> 
    </body> 
</html>

Click to view the demo

The code above generates the following result.

Relative units of measurement

A relative unit is measured in terms of some other unit. The following table shows the relative units:

Unit Identifier	Description
em	Relative to the font size of the element
ex	Relative to "x-height" of the element's font
rem	Relative to the font size of the root element
px	A number of CSS pixels
%	A percentage of the value of another property

In the following example, the value of the height property is 2em. 2em means that the height of p elements is twice the font size.


<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        p { <!--from   w  w  w  .  j  av  a2s. co m-->
            font-size: 15pt; 
            height: 2em; 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://java2s.com">Visit the website</a> 
        <p>I like <span>HTML</span> and CSS.</p> 
        <p style="font-size:12pt">Font size 12pt.</p> 
    </body> 
</html>

Click to view the demo

The code above generates the following result.

Working with Pixel CSS values

An easy to set the length is to use pixel value. 1 pixel is 1/96th of an inch. The following code set the font size and width in pixel value.


<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p { <!-- w ww  .  j  a v  a2 s. co  m-->
            background: grey; 
            color:white; 
            font-size: 20px; 
            width: 200px; 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://java2s.com">Visit the website</a> 
        <p>I like <span>HTML</span> and CSS.</p> 
    </body> 
</html>

Click to view the demo

The code above generates the following result.

Working with Percentage values

You can express a unit of measurement as a percentage of another property value. You do this using the % (percent) unit.


<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p { <!--from   ww w .j a v a2s  .co  m-->
            background: grey; 
            color:white; 
            font-size: 200%; 
            width: 50%; 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://java2s.com">Visit the website</a> 
        <p>I like <span>HTML</span> and CSS.</p> 
    </body> 
</html>

Click to view the demo

One good feature for percentage value is that the value is updating as you resize the browser window.

The code above generates the following result.

CSS3 Unit Calculations

CSS3 lets you calculate units.


<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p { <!-- w w  w .  j a  v  a  2  s.c  o m-->
            background: grey; 
            color:white; 
            font-size: 20pt; 
            width: calc(80% - 20px); 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://java2s.com">Visit the website</a> 
        <p>I like <span>HTML</span> and CSS.</p> 
    </body> 
</html>

Click to view the demo

The code above generates the following result.

CSS Angles

You express angles as a number followed by a unit-for example, 360deg.

The list of supported angle units:

Unit Identifier	Description
deg	the angle in degrees (values are from 0deg to 360deg)
grad	the angle in gradians (values are from 0grad to 400grad)
rad	the angle in radians (values are from 0rad to 6.28rad)
turn	the angle in complete turns (1turn is equal to 360deg)