← HTML & CSS learning pathHTML & CSS · Module 6 of 10
Box model, colours and fonts
Every element is a box; control size, spacing, colour and text.
📖 Key ideas
- Box model: content + padding + border + margin.
- box-sizing: border-box makes width include padding and border.
- Colours: names, hex (#047857), rgb(), hsl().
- Fonts: font-family, font-size, font-weight, line-height.
- Units: px (fixed), rem (relative to root), % and vw/vh.
💡 Real-life example: A framed photo: the photo is content, the mount is padding, the frame is border, the gap to the next frame is margin.
PaddingSpace inside the border
MarginSpace outside the border
remUnit relative to the root font size
border-boxWidth includes padding and border