Spacing — margin and padding · 间距 —— margin 和 padding
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
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
中文
盒子之间的空间
- margin(外边距)是盒子外面的空间 —— 它和邻居之间的距离。
margin: 30px;在边框外的四边各加 30 像素。- 内边距把内容往里推;外边距把别的盒子推开。
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
中文
一次只管一边
- 你可以只给一边加间距:
margin-top、margin-right、margin-bottom、margin-left。 - 内边距也一样:
padding-left: 10px;,等等。 - 在标题下面用
margin-bottom,能干净利落地把它和正文分开。
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
中文
常见错误
- 内边距在边框内侧;外边距是边框外侧的空间。
box-sizing: border-box让宽度包含内边距和边框。
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
中文
现在你来试试
- 外边距是盒子之间的空隙;内边距是盒子里面的空间。
- 先给盒子加外边距,再在标题下方加空间。
Explore · 探索
margin vs padding · margin 与 padding
Padding is space inside the border; margin is space outside. · padding 是边框内的空间;margin 是边框外的空间。
Push the boxes apart from each other. Add margin: 30px; to the .box rule. · 把盒子彼此推开一些。在 .box 规则里加上 margin: 30px;。
Add space below the heading only. Add h1 { margin-bottom: 24px; }. · 只在标题下方加一点空间。加上 h1 { margin-bottom: 24px; }。