Box Model is nothing but how we arrange an element on the browser concerning its element edge, padding, border and margin.

Let's discuss them one by one

1. Element or Content edge: It contains the default size of that particular element. Its dimensions are content-width and content-height. It may sometimes have a background colour or image also.

2. Padding: It is the area bounded between the element/content edge and the border or edge of the parent element. Its dimensions are padding-height and padding-width where you can increase the around the element.

3. Border: It is the border /edge of the parent element to a child element. Its dimensions are border-height and border-width. You can also change the colour of the border with border-color.

4. Margin: It is the area outside of the border edge. Its dimensions are margin-height and margin-width.