www.w3schools.com Open in urlscan Pro
192.229.173.207  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Tutorials References Exercises Videos Menu

Log in
Create Website Get Certified Upgrade


HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP BOOTSTRAP HOW TO W3.CSS C C++ C# REACT R
JQUERY DJANGO TYPESCRIPT NODEJS MYSQL   
Dark mode
Dark code
×



TUTORIALS


HTML AND CSS

Learn HTML Learn CSS Learn RWD Learn Bootstrap Learn W3.CSS Learn Colors Learn
Icons Learn Graphics Learn SVG Learn Canvas Learn How To Learn Sass


DATA ANALYTICS

Learn AI Learn Machine Learning Learn Data Science Learn NumPy Learn Pandas
Learn SciPy Learn Matplotlib Learn Statistics Learn Excel


XML TUTORIALS

Learn XML Learn XML AJAX Learn XML DOM Learn XML DTD Learn XML Schema Learn XSLT
Learn XPath Learn XQuery


JAVASCRIPT

Learn JavaScript Learn jQuery Learn React Learn AngularJS Learn JSON Learn AJAX
Learn AppML Learn W3.JS


PROGRAMMING

Learn Python Learn Java Learn C Learn C++ Learn C# Learn R Learn Kotlin Learn Go
Learn Django Learn TypeScript


SERVER SIDE

Learn SQL Learn MySQL Learn PHP Learn ASP Learn Node.js Learn Raspberry Pi Learn
Git Learn MongoDB Learn AWS Cloud


WEB BUILDING

Create a Website NEW Where To Start Web Templates Web Statistics Web
Certificates Web Development Code Editor Test Your Typing Speed Play a Code Game
Cyber Security Accessibility Join our Newsletter


DATA ANALYTICS

Learn AI Learn Machine Learning Learn Data Science Learn NumPy Learn Pandas
Learn SciPy Learn Matplotlib Learn Statistics Learn Excel Learn Google Sheets


XML TUTORIALS

Learn XML Learn XML AJAX Learn XML DOM Learn XML DTD Learn XML Schema Learn XSLT
Learn XPath Learn XQuery

×



REFERENCES


HTML

HTML Tag Reference HTML Browser Support HTML Event Reference HTML Color
Reference HTML Attribute Reference HTML Canvas Reference HTML SVG Reference
Google Maps Reference


CSS

CSS Reference CSS Browser Support CSS Selector Reference Bootstrap 3 Reference
Bootstrap 4 Reference W3.CSS Reference Icon Reference Sass Reference


JAVASCRIPT

JavaScript Reference HTML DOM Reference jQuery Reference AngularJS Reference
AppML Reference W3.JS Reference


PROGRAMMING

Python Reference Java Reference


SERVER SIDE

SQL Reference MySQL Reference PHP Reference ASP Reference


XML

XML DOM Reference XML Http Reference XSLT Reference XML Schema Reference


CHARACTER SETS

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML
Symbols HTML UTF-8

×



EXERCISES AND QUIZZES


EXERCISES

HTML Exercises CSS Exercises JavaScript Exercises Python Exercises SQL Exercises
PHP Exercises Java Exercises C Exercises C++ Exercises C# Exercises jQuery
Exercises React.js Exercises MySQL Exercises Bootstrap 5 Exercises Bootstrap 4
Exercises Bootstrap 3 Exercises NumPy Exercises Pandas Exercises SciPy Exercises
TypeScript Exercises Excel Exercises R Exercises Git Exercises Kotlin Exercises
Go Exercises MongoDB Exercises


QUIZZES

HTML Quiz CSS Quiz JavaScript Quiz Python Quiz SQL Quiz PHP Quiz Java Quiz C
Quiz C++ Quiz C# Quiz jQuery Quiz React.js Quiz MySQL Quiz Bootstrap 5 Quiz
Bootstrap 4 Quiz Bootstrap 3 Quiz NumPy Quiz Pandas Quiz SciPy Quiz TypeScript
Quiz XML Quiz R Quiz Git Quiz Kotlin Quiz Cyber Security Quiz Accessibility Quiz


COURSES

HTML Course CSS Course JavaScript Course Front End Course Python Course SQL
Course PHP Course Java Course C++ Course C# Course jQuery Course React.js Course
Bootstrap 4 Course Bootstrap 3 Course NumPy Course Pandas Course TypeScript
Course XML Course R Course Data Analytics Course Cyber Security Course
Accessibility Course


CERTIFICATES

HTML Certificate CSS Certificate JavaScript Certificate Front End Certificate
Python Certificate SQL Certificate PHP Certificate Java Certificate C++
Certificate C# Certificate jQuery Certificate React.js Certificate MySQL
Certificate Bootstrap 5 Certificate Bootstrap 4 Certificate Bootstrap 3
Certificate TypeScript Certificate XML Certificate Excel Certificate Data
Science Certificate Cyber Security Certificate Accessibility Certificate

×

Tutorials

References

Exercises

Get Certified Upgrade Spaces Videos Shop


CSS REFERENCE

CSS Reference CSS Browser Support CSS Selectors CSS Functions CSS Reference
Aural CSS Web Safe Fonts CSS Fallback Fonts CSS Animatable CSS Units CSS PX-EM
Converter CSS Colors CSS Color Values CSS Default Values CSS Entities



CSS PROPERTIES

accent-color align-content align-items align-self all animation animation-delay
animation-direction animation-duration animation-fill-mode
animation-iteration-count animation-name animation-play-state
animation-timing-function aspect-ratio backdrop-filter backface-visibility
background background-attachment background-blend-mode background-clip
background-color background-image background-origin background-position
background-position-x background-position-y background-repeat background-size
block-size border border-block border-block-color border-block-end-color
border-block-end-style border-block-end-width border-block-start-color
border-block-start-style border-block-start-width border-block-style
border-block-width border-bottom border-bottom-color border-bottom-left-radius
border-bottom-right-radius border-bottom-style border-bottom-width
border-collapse border-color border-end-end-radius border-end-start-radius
border-image border-image-outset border-image-repeat border-image-slice
border-image-source border-image-width border-inline border-inline-color
border-inline-end-color border-inline-end-style border-inline-end-width
border-inline-start-color border-inline-start-style border-inline-start-width
border-inline-style border-inline-width border-left border-left-color
border-left-style border-left-width border-radius border-right
border-right-color border-right-style border-right-width border-spacing
border-start-end-radius border-start-start-radius border-style border-top
border-top-color border-top-left-radius border-top-right-radius border-top-style
border-top-width border-width bottom box-decoration-break box-reflect box-shadow
box-sizing break-after break-before break-inside caption-side caret-color
@charset clear clip clip-path color column-count column-fill column-gap
column-rule column-rule-color column-rule-style column-rule-width column-span
column-width columns content counter-increment counter-reset cursor direction
display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow
flex-shrink flex-wrap float font @font-face font-family font-feature-settings
font-kerning font-size font-size-adjust font-stretch font-style font-variant
font-variant-caps font-weight gap grid grid-area grid-auto-columns
grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap
grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start
grid-template grid-template-areas grid-template-columns grid-template-rows
hanging-punctuation height hyphens image-rendering @import inline-size inset
inset-block inset-block-end inset-block-start inset-inline inset-inline-end
inset-inline-start isolation justify-content @keyframes left letter-spacing
line-height list-style list-style-image list-style-position list-style-type
margin margin-block margin-block-end margin-block-start margin-bottom
margin-inline margin-inline-end margin-inline-start margin-left margin-right
margin-top mask-image mask-mode mask-origin mask-position mask-repeat mask-size
max-height max-width @media max-block-size max-inline-size min-block-size
min-inline-size min-height min-width mix-blend-mode object-fit object-position
opacity order orphans outline outline-color outline-offset outline-style
outline-width overflow overflow-anchor overflow-wrap overflow-x overflow-y
padding padding-block padding-block-end padding-block-start padding-bottom
padding-inline padding-inline-end padding-inline-start padding-left
padding-right padding-top page-break-after page-break-before page-break-inside
paint-order perspective perspective-origin pointer-events position quotes resize
right rotate row-gap scale scroll-behavior scroll-margin scroll-margin-block
scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom
scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start
scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding
scroll-padding-block scroll-padding-block-end scroll-padding-block-start
scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end
scroll-padding-inline-start scroll-padding-left scroll-padding-right
scroll-padding-top scroll-snap-align scroll-snap-stop scroll-snap-type tab-size
table-layout text-align text-align-last text-decoration text-decoration-color
text-decoration-line text-decoration-style text-decoration-thickness text-indent
text-justify text-orientation text-overflow text-shadow text-transform top
transform transform-origin transform-style transition transition-delay
transition-duration transition-property transition-timing-function translate
unicode-bidi user-select vertical-align visibility white-space widows width
word-break word-spacing word-wrap writing-mode z-index






CSS UNITS

❮ Previous Next ❯

--------------------------------------------------------------------------------


CSS UNITS

CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding,
font-size, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.


EXAMPLE

Set different length values, using px (pixels):

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

Try it Yourself »

Note: A whitespace cannot appear between the number and the unit. However, if
the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units: absolute and relative.

--------------------------------------------------------------------------------


ABSOLUTE LENGTHS

The absolute length units are fixed and a length expressed in any of these will
appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen
sizes vary so much. However, they can be used if the output medium is known,
such as for print layout.

Unit Description cm centimeters Try it mm millimeters Try it in inches (1in =
96px = 2.54cm) Try it px * pixels (1px = 1/96th of 1in) Try it pt points (1pt =
1/72 of 1in) Try it pc picas (1pc = 12 pt) Try it

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

--------------------------------------------------------------------------------


RELATIVE LENGTHS

Relative length units specify a length relative to another length property.
Relative length units scale better between different rendering medium.

Unit Description em Relative to the font-size of the element (2em means 2 times
the size of the current font) Try it ex Relative to the x-height of the current
font (rarely used) Try it ch Relative to the width of the "0" (zero) Try it rem
Relative to font-size of the root element Try it vw Relative to 1% of the width
of the viewport* Try it vh Relative to 1% of the height of the viewport* Try it
vmin Relative to 1% of viewport's* smaller dimension Try it vmax Relative to 1%
of viewport's* larger dimension Try it % Relative to the parent element Try it

Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

--------------------------------------------------------------------------------

ADVERTISEMENT


--------------------------------------------------------------------------------


BROWSER SUPPORT

The numbers in the table specify the first browser version that fully supports
the length unit.

Length Unit em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0
1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0
12.0 19.0 6.0 20.0 vmax 26.0 16.0 19.0 7.0 20.0

--------------------------------------------------------------------------------

❮ Previous Next ❯


ADVERTISEMENT



COLOR PICKER



Get certified
by completing
a CSS
course today!

w3schools CERTIFIED . 2022
Get started


ADVERTISEMENT


--------------------------------------------------------------------------------

ADVERTISEMENT

ADVERTISEMENT


--------------------------------------------------------------------------------

Report Error
Report Error
Spaces
Spaces
Upgrade
Upgrade
Newsletter
Newsletter
Get Certified
Get Certified

--------------------------------------------------------------------------------

×


REPORT ERROR

If you want to report an error, or if you want to make a suggestion, do not
hesitate to send us an e-mail:

help@w3schools.com


×


THANK YOU FOR HELPING US!

Your message has been sent to W3Schools.

TOP TUTORIALS

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial


TOP REFERENCES

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


TOP EXAMPLES

HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples


GET CERTIFIED

HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate


--------------------------------------------------------------------------------

FORUM | ABOUT
W3Schools is optimized for learning and training. Examples might be simplified
to improve reading and learning. Tutorials, references, and examples are
constantly reviewed to avoid errors, but we cannot warrant full correctness of
all content. While using W3Schools, you agree to have read and accepted our
terms of use, cookie and privacy policy.

Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.