Web development
Understanding Padding, Borders, and Margins
Updated Oct 28, 2026
The CSS box model contains content, padding around that content, a border and an outer margin. Padding is inside the border; margin is outside it. The box-sizing property affects how declared dimensio
What you’ll learn
Learn and practise understanding padding, borders, and margins.
Explanation
The CSS box model contains content, padding around that content, a border and an outer margin. Padding is inside the border; margin is outside it. The box-sizing property affects how declared dimensions are calculated. Inspect the result in browser developer tools.
CSS box model មាន content, padding, border និង margin។ Padding នៅខាងក្នុង border ខណៈ margin នៅខាងក្រៅ។ អាចប្រើ browser developer tools ពិនិត្យទំហំទាំងនេះ។
Worked example
A card with padding: 1rem; border: 1px solid; margin: 1rem has space both inside and outside its border.
Practice
- Which space is between the content and the border?
- Explain the same idea using your own example.
Answers and guidance
Show answers / បង្ហាញចម្លើយ
- Padding.
- Answers vary. Check your explanation against the lesson.
Quick recap
The CSS box model contains content, padding around that content, a border and an outer margin.