CSS Box Model

The CSS box model is a box that wraps around every element. It consists of: margins, borders, padding, and the actual content

Note- The margin is not counted towards the actual size of the box, but affects the total space that the box will take up.

Element width = width + left padding + right padding + left border + right border

Element height = height + top padding + bottom padding + top border + bottom border

CSS height and width Values

auto — browser calculate the height and width. it is the default value.

length — in px, cm em, etc

% — in percent of the containing element

inherit — inherited from its parent value