CSS length
You are Here:
CSS length
CSS length represents a distance value.
Lengths can be used in many CSS properties, such as padding, margin, font-size, width, height, etc.
The following tables provide a list of all CSS length values.
Absolute Length Units
| Length | Expansion | Convert to px | Example |
|---|---|---|---|
| px | pixel | 1 px = 1 px | Run |
| cm | centimetre | 1 cm = 38 px | Run |
| mm | millimetre | 1 mm = 3.8 px | Run |
| in | inch | 1 in = 96 px | Run |
| pc | pica | 1 pc = 16 px | Run |
| pt | point | 1 pt = 1.3 px | Run |
Viewport Percentage Length
| Length | Explanation | Example |
|---|---|---|
| vh | hundredths of the viewport height | Run |
| vw | hundredths of the viewport width | Run |
| vmin | hundredths of whichever is minimum, the viewport width or height. | Run |
| vmax | hundredths of whichever is maximum, the viewport width or height. | Run |
Relative Length Units
| Length | Explanation | Example |
|---|---|---|
| ch | Relative to width of the "0" (zero), i.e. if body font-size:16 then the relative font-size is 10px | Run |
| em | Relative to the font-size of the element, i.e. if body font-size:5 then the relative font-size is 15px (when em is 3) | Run |
| ex | Relative to the x-height of the current font. For example, 1ex ≈ 0.5em in many fonts. | Run |
| rem | Relative to font-size of the root element (typically <html>). | Run |
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
