Understand the box model
Control the space inside and around elements with padding, borders and margins.
- Identify content, padding, border and margin
- Add space inside an element
- Set borders and widths
Every element is laid out as a box. Its content sits inside padding, then a border, then margin outside the border. Padding gives content breathing room inside a box; margin separates it from neighboring boxes.
1.card {
2 width: 320px;
3 padding: 24px;
4 border: 2px solid #d5dfd8;
5 margin: 16px;
6 box-sizing: border-box;
7}A 320px card, including padding and border
With the default content-box, width describes only the content area, so padding and border make the final box larger. box-sizing: border-box includes padding and border in the declared width. Many sites set it on every element to make sizing easier to predict.
Key takeaways
Padding is inside the border; margin is outside it.
Borders surround padding and content.
Border-box sizing includes padding and border in the width.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write CSS
Style the sample page, see your changes in the sandboxed preview, and run checks against the computed styles.
Space a card
Style .card with 24px of padding, a 2px solid border, and box-sizing: border-box.
- Card box styles
Your CSS is applied to a sample page in a sandboxed preview. Tests check computed styles.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…