CSS Box Model

CSS Box Model

Anil Verma's photo
Anil Verma
·Jan 23, 2021·

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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

Share this