tutorials/css - the complete guide/08. sizes_and_units.md

Dimensions, Sizes And Units

Where Unit Matters

Pixels, Percentages & More

Units	Sign
pixels	px
percentages	%
root em	rem
em	em
viewport height	vh
viewport width	vw

Some questions?

1. Which properties can you use in connection with these units?
2. How is the size calculated?
3. What's the right unit to choose?

Where Units Matter

Keeping the CSS box model in mind, going inside out, e.g from content to padding to border to margin. Lets see where we can apply these units.

font-size, padding, border, margin, width, height, top, bottom, left, right.

An Overview Of Available Sizes And Units

How is the Size Calculated?

Absolute Lengths	Viewport Lengths	Font-Relative Lengths
Mostly ignore user settings	Adjust to current viewport	Adjust to default font size
px	vh	rem
cm		vw
mm		vmin
...		vmax

Also, percentage % is another special unit used.

How is the Box Size for % Units Calculated?

To understand how % units are calculated, we first need to understand the concept of containing blocks.

Rules to Remember fixed Positioning & %

If an element has position property assigned fixed value, than the containing block of that element will be the Viewport. So the percentage % value of the element will be relative to the viewport's dimensions.

Rules to Remember absolute Positioning & %

If an element has position property assigned absolute value, than the containing block of that element will be an Ancestor. In this case, the percentage % value of the element will be relative to it's ancestor's content + padding.

But the question is, what is the containing block or ancestor for this element, and the answer is, the closest ancestor with any of these properties applid: position: absolute;, position: relative;, position: fixed; or position: sticky;. Or the closest ancestor which is not positioned static.

Rules to Remember static Or relative Positioning & %

With position static or relative, the containing block would still be an Ancestor, but the % value of the element will only be relative to the ancestor's content and not padding.

The ancestor for a static or relative positioned elements will be the closest block level element.

Using min-width/height And max-width/height

To restrict the minimum or maximum size of the elements. e.g. the following rule will make the element have 65% width of the containing block, unless it is larger than 500px pixels, in that case it will not grow larger than that.

.image {
    width: 65%;
    max-width: 500px;
}

Working With rem And em

rem and em are relative units which are calculated based on the font size inherited from a container or browser. e.g setting a font-size: 20px for a continer and font-size: 2em for an element in that container will make that element have font-size 40px in pixels, because 2em means 2 times the size inherited.

The issue with em is it multiplies the font-size everytime there's a font-size defined in it's chain of inheritance.

To avoid the issue with the em unit, we can use rem, which only multiplies it with the font-size defined in the root element of our website, that is the html element.

Adding rem To Additional Properties

We can apply the rem unit to other elements or as margin and padding, e.g. we can set margin-top: 2rem;, but keep in mind that the margin will increase or decrease with the change in font-size.

Understanding the Viewport Units vh And vw

The viewport units allows us the set our sized relative to the actual Viewport size. e.g. width: 80vw; will set the element's width to 80 percent of the viewports actual width.

Another units that set the sizes relative to viewport's actual size are vmin and vmax, which selects the minimum or maximum value from viewport's width and height.

Choosing The Right Unit

The following list for choosing the right unit for a property, is not a definit guide, but a preference of an experienced developer:

Property	"Recommended" Unit
font-size (root element)	%
font-size	rem
padding & margin	rem
border	px
width & height	%, vw, vh
top & bottom	%
left & right	%

Using auto To Center Elements

As we have already seen, using the margin: auto; centers elements in it's container. margin: auto; only works for block level elements with an explicitly assigned width though.