Beginner LevelCSS & Modern Layouts
What is the CSS Box Model and how do content, padding, border, and margin interact?
❓ Interview Prompt: Explain the four layers of the CSS Box Model and how box-sizing: border-box changes width calculation.
Every HTML element rendered by the browser is wrapped inside an invisible rectangular CSS Box Model consisting of four concentric layers:
1
Content Box: The innermost area where text, images, or child elements are rendered. Controlled by
width and height.2
Padding: Transparent spacing between the content edge and the border. Increases the element's clickable area.
3
Border: A visible (or invisible) edge surrounding the padding. Configurable with
border-width, border-style, and border-color.4
Margin: Transparent spacing outside the border separating this element from neighboring elements. Margins can collapse vertically between siblings.
box-sizing Property:
•
content-box (default): width applies only to the content area. Padding and border are added on top, making the total rendered width larger.•
border-box: width includes content + padding + border. This is the preferred modern standard because the element's rendered size matches the declared width.Code Implementation Example
css
/* Universal border-box reset (recommended) */
*, *::before, *::after {
box-sizing: border-box;
}
.card {
width: 300px; /* Total rendered width = 300px */
padding: 20px; /* Included in the 300px */
border: 2px solid #3d2c2e; /* Included in the 300px */
margin: 16px; /* External spacing, not included */
}💡Universal border-box reset and card box model example.
🎯 Interview Key Takeaway
Always set box-sizing: border-box globally so that width and height include padding and border.
#Box Model#CSS Basics#Layout#Beginner
Back to all CSS & Modern Layouts Questions→