Web Development · CSS

What is the CSS Box Model? Explain all its components.

Beginner

~3 min answer

0 views

0 likes

2026

CSS Box Model Layout Web Design

Quick Answer

The Box Model has 4 parts: Content, Padding, Border, and Margin from inside to outside.

Detailed Answer

The CSS Box Model describes the rectangular boxes generated for elements. It consists of:
1. Content - The actual content (text, images)
2. Padding - Space between content and border
3. Border - A line around padding and content
4. Margin - Space outside the border

Formula: Total Width = content + padding-left + padding-right + border-left + border-right + margin-left + margin-right

box-sizing: border-box makes width include padding and border.

Example / Code

.box { width: 200px; padding: 20px; border: 2px solid black; margin: 10px; }

Interview Tips

Draw the box model on paper. Explain box-sizing: border-box as it is commonly used in modern CSS.

Common Mistakes

Forgetting that margin collapses between adjacent elements. Not knowing box-sizing difference.

Related Skills

HTML JavaScript Responsive Design