BitWithBite
HTML & CSS Worksheet
🎨 Box Model & Layout
SCORE___ / 20
NameClassDate
After this worksheet you can
content/padding/border/marginbox-sizing border-boxWidth/heightCollapsing margins🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Inside spacing is:
2Outside spacing is:
3border-box includes in width:
4The box layers, inside-out:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5padding: 10px 20px means 10 top/bottom, 20 .
6box-sizing: -box simplifies sizing.
7Card: 16px padding, 1px border, 20px bottom margin.
8padding vs margin in one line?
9Why set * box-sizing border-box?
🚀 Section C · Challenge ● CHALLENGE 5
10Centre a 600px div.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-A 3-A 4-A | 5 left/right 6 border 7 = padding:16px; border:1px solid #ccc; margin-bottom:20px; 8 = padding = inside the border; margin = outside it 9 = Widths mean what you say - padding/border included | 10 = width:600px; margin:0 auto;