What is CSS Box Model?

In DOM (Document Object Model) each element is represented as a rectangular box. These boxes determine the properties like size, color etc. The position of these elements is also determined by these boxes which in turn forms the layout of your webpages. You must know the CSS box model as you know your name if you want to be able to set the layout of your webpages and write your own CSS stylesheets.

The CSS Box Model is the foundation of this layout. It defines 4 basic properties:

–  Content: Content area is defined using “width” and “height” properties

–  Padding: Represents the inner margin of a CSS box

–  Border: A distinct layer, between the outer edge of the padding and the inner edge of the margin

–  Margin: Extends the border area with an empty area used to separate the element from its neighbors

The diagram below explains the concept better:

css-box-model

Hope this helps.
Good Luck,
Serdar