HTML & CSS
/Beginner
Content, Padding, Border, Margin
Definition
The CSS Box Model describes the rectangular boxes generated for elements in the document tree. Every single HTML element is essentially a box made up of Content, Padding, Border, and Margin.
Explain Like I'm New
Imagine a fragile glass vase (the Content) being shipped in a cardboard box. The bubble wrap protecting the vase is the Padding. The cardboard box itself is the Border. And the empty space you leave between this box and the next box on the delivery truck is the Margin.
Real World Example
Creating a button. The text 'Click Me' is the content. You add `padding: 10px` so the text isn't touching the edge of the button. You add `border: 1px solid black` to draw the button shape. You add `margin: 20px` to push other buttons away so they don't overlap.
Common Use Cases
- •Layout spacing
- •Button sizing
- •Preventing elements from crashing into each other
Interactive Example
Interview Questions
basic
- Which part of the box model is on the OUTSIDE of the border?
intermediate
- Does background color show underneath the Margin?