BitWithBite
HTML & CSS Worksheet
🎨 Box Model & Layout
SCORE___ / 20
NameClassDate
After this worksheet you can
content/padding/border/marginbox-sizing border-boxWidth/heightCollapsing margins📚 Quick Recap
🎯 What you'll learn: Every HTML element is a box. You'll master the four layers of the CSS box model (content, padding, border, margin), why box-sizing: border-box is essential, all display values (block/inline/inline-block/none), CSS positioning (static/relative/absolute/fixed/sticky), z-index, and overflow.
🧠 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;