CSS box model, Padding, Margin and Box-sizing

In css, all elements are placed in boxes. this is called box model.

Margin refers to the distance between the boxes.

Padding refers to the distance between the content and box edge.

By default, when we set the height and width of the element, the padding is also included. meaning if you have element like this:

the actual size will become 300px by 300px, because additional 100px is added to the content from each side. To prevent this, and set height and width such that padding and border is included, use