Size units

px (pixel): equals to a pixel of the screen

%: a percentage of the space available (size of parent element without padding, border and margin)

vw (viewport width): a percentage of the browser window width

vh (viewport height): a percentage of the browser window height

em: related to the nearest parent element with a custom font size

rem (root em): related to the font size of root - html - element, equals to 16px if not provided

Box model

(You can find this figure in the dev tools of your browser, next to the CSS code or by scrolling to the bottom. You can open dev tools by pressing F12.)

Element (blue part of the figure)

This contains the text content and child elements of the element.

Sizing

Background

Single color background:

Linear gradient background:

Image background:

More options, explanations in the Backgrounds Cheatsheet.

Padding (green part of the figure)

Whitespace around the element which inherits the background set for the element.

Set all four sides to the same size

Shortcut:

Set top-bottom and left-right sides to the same size

Shortcut:

In the shortcut the first value is top and bottom, the second one is left and right.

Set left-right sides to the same size

Shortcut:

In the shortcut the first value is top, the second one is left and right, the third one is bottom.

Set all sides to different size

Shortcut:

In the shortcut the first value is top, the second one is right, the third one is bottom, the fourth one is left.

Border (yellow part of the figure)

The line around padding which has a size, style and color.

Size

Each sides of the border can be sized individually, similarly to padding (border-top-width, border-bottom-width, border-right-width, border-left-width).

Style

The border-style property can have the following values: solid, dashed, dotted, double, groove, ridge (latter two have a 3D-like effect)

Each sides of the border can have a different style (border-top-style, border-bottom-style, border-left-style, border-right-style).

Color

The value of border-color property can be provided with the English name (black, grey, green, yellow etc.), RGB/RGBA code (e.g. rgb(0, 255, 0) or rgba(0, 255, 0, 0.7)), HEX code (e.g. #00ff00 or #00ff0011) or HSL/HSLA code (e.g. hsl(120, 255, 255) or hsla(120, 255, 255, 0.7)) of a color.

If not provided it becomes the same as the font color of the element.

Each sides of the border can have a different color (border-top-color, border-bottom-color, border-left-color, border-right-color).

Set all properties

The first value of border property is size, the second one is style, the third one (optional) is color.

The properties of each sides can be set individually (border-top, border-bottom, border-left, border-right).

Margin (red part of the figure)

Whitespace outside border which separates the element from other elements.

Each sides of the border can be sized individually, similarly to padding (margin-top, margin-bottom, margin-right, margin-left).

Box-sizing

The box-sizing provides which parts of the box model count as part of width and height. This property is usually provided for all elements of the page (*). The default value is content-box, which only counts the element itself (blue part of the figure) as part of width and height. The most commonly used value is border-box which counts the element, padding and border (blue, green and yellow part of the figure) as part of width and height.

Example:

If box-sizing is set to content-box the full width and height are 9rem because the base width and height values (3rem) don't contain the paddings, borders and margins (2*1+2*1+2*1 = 6rem), those are added on top of base values.

If box-sizing is set to border-box the full width and height are only 5rem because the base width and height values (3rem) contain paddings and borders, so only the margins (2*1 = 2rem) are added on top of them. If the sums of paddings and borders are equal to or bigger than the values of width and height properties (e.g. if paddings and borders are both set to 2rem instead of 1rem), those sums will provide the base width and height values (width and height properties will be disregarded), paddings and borders will take up the whole space inside base width and height.