The box model · 盒模型
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 此页面需较新浏览器（支持 SharedArrayBuffer）。请升级 Chrome、Edge、Firefox 或 Safari 至最新版本。
English
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
中文
每个盒子都有层
- CSS 把每个元素都看成一个盒子。
- 内容是你的文字或图片。padding(内边距)是内容四周、盒子里面的空间。
- **border(边框)**是内边距外面的一圈线。margin(外边距)是盒子外面的空间,把别的盒子推开。
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
中文
内边距和边框
padding: 20px;在四边各加 20 像素的内部空间。border: 2px solid black;画一条线 —— 依次是粗细、样式、颜色。- 内边距让盒子显得宽松;边框让它更醒目。
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
中文
常见错误
- 盒模型由内到外是:内容、内边距、边框、外边距。
- 内边距在边框内侧增加空间。
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
中文
现在你来试试
- 内边距在里面,边框围在它外面。
- 先给盒子加内边距,再加边框。
Explore · 探索
The CSS box model · CSS 盒模型
Every box is content + padding + border + margin around it. · 每个盒子是内容 + 外围的 padding + border + margin。
Give the box some breathing room inside. Add padding: 20px; to the .box rule. · 给盒子内部一点空间。在 .box 规则里加上 padding: 20px;。
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour. · 给盒子画一圈边框。在 .box 规则里加上 border: 2px solid navy;(navy 是藏青色)。三个部分按这个顺序写:粗细、样式、颜色。