Lengths property values provide size of some element on a page, such as
height. The property value consist of a numeric length and a measurements units (
rem etc), making a measurements or dimensions.
Absolute vs. Relative Units
Absolute units are units based on a standard system of measures that people agrees on. One unit is the same wherever we are. In CSS, there are several but
px is by far the most used.
A pixel on a standard screen and a pixel on a high-resolution screen is not the same. To palliate to this problem, CSS uses physical pixel (also device or display pixel) and CSS reference pixel (CSS pixel or reference pixel). This difference is the cause of many problem when using a design document to build a web page. On a high-resolution screen, an image view at 100% of its size in the image editing tool may appear smaller in the browser.
Relative units are units relative to something: a hand or a story or floor of a buildings.
Famous relative units in CSS include
rem. They are proportional to the calculated and root font sizes, respectively.
If the calculated font size of the current element is 20 pixels,
30px (\(20 \times 1.5\)).
If the root font, i.e. the font size of the
html element is 16 pixels,
24px (\(16 \times 1.5\)).
It’s a good idea to set the root font size in pixel in both
body elements to make the above calculation more predictable.
When working to support old browser, one needs to add a fallback unit, generally in pixels. When doing so, one should assume the browser default, or root font, to be 16px (not always true but good enough).
Technically, percentages are not a length value in CSS but it doesn’t matter most of the case. They are use to define dimensions as a fraction of the container’s width or height.
auto is not a length value. It’s common uses are as a way to fit the entire element in its container, or to push an element all the way to one way or another. By setting right and left margins to
auto you can also center a block element.
Difference Between auto and 100%
width: auto, the browser tries to put the entire element, including its margins, border and padding withing the container. However, when using
width: 100% instead, browser won’t consider the margins when it calculates the required element size.