Q2: What are the four layers of the standard CSS Box Model?
Every rendered HTML element is enclosed in a rectangular box consisting of four concentric layers from inside out: Content, Padding (transparent area inside borders), Border (outer edge surrounding padding), and Margin (transparent clearance separating neighbor elements).
CSS Box Model Structural Layers
Box Layer Properties
.box {
width: 200px; /* Content Area */
padding: 20px; /* Inner clearance */
border: 2px solid; /* Enclosing boundary */
margin: 15px; /* Outer clearance */
}💡 These four properties define the complete spatial geometry of the HTML box element.
Key Takeaways
- Layers from inside out: Content → Padding → Border → Margin.
- Padding adds space inside the border; Margin creates clearance outside.
Knowledge Check
Which Box Model layer creates clearance inside an element's border?