# 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