• Margin: is the area outside the border

• Border: is the border surrounding the content and padding which could be of any width.

• Padding: is the transparent spacing between the border and the content

• Content: is the actual content may it be text image anything

• Box model is useful when setting some elements height width

• Let's say a para has a marginleft and right of 10px. If you set the width to 100px the actual width will be 120px

Example