# 练习 2：盒模型卡片

## 目标

彻底理解 `margin`、`padding`、`border` 的区别。

## 你要练什么

- `width`
- `padding`
- `border`
- `margin`
- `border-radius`
- `box-shadow`

## 任务

请把一个课程卡片做出来，要求：

- 卡片和页面边缘有距离
- 卡片内部文字和边框有距离
- 卡片有边框和圆角
- 卡片有轻微阴影
- 按钮区域和正文之间有明显间隔

## 文件

- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/starter.html)
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/starter.css)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/answer.html)
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/answer.css)