FAQs - The CSS Box Model

What is the CSS box model?

The CSS box model is a box that wraps around every HTML element containing five parts:
→ content → padding → border
→ outline → margin
It is used for design and layout purposes to add borders & define space between elements.

What is the difference between margin and padding?

[Margin vs Padding]
→ margin: clears an area AROUND THE CONTENT
→ padding: clears an area OUTSIDE THE BORDER
NOTE: padding comes before margin

How is the total of height and width of an HTML element determined?

[Total element width] = width + left padding + right padding + left border + right border + left margin + right margin
[Total element height] = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Explain this CSS property: padding: 25px 50px

[padding: 25px 50px]
only two values in padding property given... Two values indicate values are grouped between top & bottom padding and right & left padding
∴ 25px = top and bottom padding
50px = right and left padding