Q1. What is the CSS Box Model?

The CSS Box Model describes how elements are rendered as boxes with content, padding, border, and margin areas from inside to outside.

Q2. Explain the components of the Box Model.

Content: actual content. Padding: space between content and border. Border: surrounds padding. Margin: space outside the border separating elements.

Q3. How do you calculate the total width of an element?

Total width = width + left padding + right padding + left border + right border + left margin + right margin.

Q4. What does box-sizing: border-box do?

It makes width and height include padding and border, so total width = width + margins only. This makes layout calculations easier.

Q5. What is the default value of box-sizing?

The default is content-box, where width and height apply only to content, excluding padding and border.