The box model
The four layers of a box (content, padding, border, margin), box-sizing, the difference between block, inline and inline-block, and the collapsing of vertical margins.
- 24 cards
- 5 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- The numbers
- Scenarios
A few cards from the deck
Padding: what is it?
Show the answer
The space between the content and the border, inside the box; it takes the element's background colour.
If a button has a blue background, the background extends under this space: that is what sets it apart from the margin, which is transparent.
What total width does this box take on screen?
```css
.carte {
width: 300px;
padding: 0 20px;
border: 2px solid black;
}`- 344 px
- 300 px
- 304 px
- 340 px
Show the answer
344 px
In
content-box, width measures the content only: 300 + 2 × 20 of padding + 2 × 2 of border = 344. Withbox-sizing: border-box, the box would be 300px.From the inside out, a box stacks the …, the …, the … then the ….
Show the answer
From the inside out, a box stacks the content, the padding, the border then the margin.
The browser inspector draws exactly these layers as nested rectangles when you hover an element.
Margin: what is it?
Show the answer
The transparent space around the border, which pushes the box away from its neighbours.
It is the outer layer, beyond the border: the element's background does not extend into it and a click in the margin does not reach the element. With
margin: 0 auto, automatic margins centre a fixed-width block.