CSS box model

• Content box: The innermost box, where text and image are placed.
• Padding box: It is a space between the element content and border of the element.
• Border box: The border goes around the element content and padding.
• Margin box: It is the area around border of the element.
• The above properties have four edges “top, right, bottom, left”. 
• Whenever we set height and width of the element we set it only for element content of the element.
• To calculate the total area of the element we need calculate the area of element with margin, padding