What is the box model?
Learn that every HTML element is a box and its layers.
What is the box model?
Every HTML element is drawn as a box. The box model describes four layers of this box from inside out: content, padding, border and margin.
The browser computes each layer separately. Content is where text or images sit; padding is breathing room between content and border; border is the box's outline; margin is the distance to neighboring boxes.
Telling the four layers apart
The content area is set by width and height; this is where text sits. padding is the gap separating content from border; it takes the background color but is not content.
border is the frame of the box; its width and color are set separately. margin is transparent, has no background, and pushes neighbor boxes away. Margin can be negative; padding cannot.
Exercise Make the box visible
Write a declaration block for the .box selector. Add a border and a padding declaration so the box model becomes visible. For example border: 2px solid #444; and padding: 16px;.
Show example solution
.box {
border: 2px solid #444;
padding: 16px;
}Test yourself
-
Which is the innermost layer of the box model?
- padding
- margin
- content
- border
Show answer
content — Correct. Content sits innermost; then padding, border and margin go outward.
-
Match each layer to its role
- content
- Where text and images sit
- padding
- Gap between content and border
- border
- The frame of the box
- margin
- Space that pushes neighbor boxes
-
Set the content height
.box { width: 200px; ____: 100px; }Show answer
.box { width: 200px; height: 100px; }