Margin
Web Basics — HTML & CSS Lesson 17 2:17 English narration · English + 中文 subtitles burned in
Chapters
Transcript
Margin is the space outside a box, and here is the thing about it: on a box with nothing around it, a margin changes nothing you can see.
margin 是盒子外面的空间，而关于它有一件事： 在一个周围什么都没有的盒子上，margin 不会带来任何看得见的变化。
Put two boxes together and it changes everything.
把两个盒子放在一起，它就改变了一切。
Thirty pixels apart instead of touching, and the page stops feeling crowded.
从紧贴变成相隔 30 像素，页面就不再显得拥挤。
Spacing is most of what separates a page that looks designed from one that does not — which makes this the most useful property in CSS.
间距，正是"看起来经过设计"和"没有"之间的主要区别—— 这也让它成为 CSS 里最有用的属性。
Keep the pair straight and this lesson is done.
把这一对分清楚，这一课就学完了。
Padding pushes the content in, away from the edges of its own box.
padding 把内容往里推，让它离自己盒子的边缘远一点。
Margin pushes other boxes away, and leaves the box the same size.
margin 把别的盒子推开，而自己这个盒子大小不变。
Both make a gap appear, so they can look interchangeable — but they are not.
两者都会让间隙出现，所以它们看起来好像可以互换——但并不能。
Padding takes the background colour with it, so a padded box gets bigger and stays coloured.
padding 会带着背景色一起扩张， 所以加了 padding 的盒子变大了，而且那块地方仍然有颜色。
Margin does not; that gap shows the page behind.
margin 不会；那段间隙露出的是它后面的页面。
Writing margin on its own spaces all four sides.
单写 margin，会给四条边都加上间距。
Often you want just one, and each side has its own name: margin-top, margin-right, margin-bottom, margin-left.
而你常常只想加一边，每一边都有自己的名字： margin-top、margin-right、margin-bottom、margin-left。
The same four exist for padding.
padding 也有对应的四个。
The one you will use most is margin-bottom under a heading — it opens a gap between a title and its text without touching either of them.
你用得最多的会是标题下面的 margin-bottom—— 它在标题和正文之间拉开一段距离，而两者本身都不受影响。
The lesson's own example puts both to work in three lines.
这一课自己的例子，用三行代码把两者都用上了。
A background colour makes each tag visible.
背景色让每个标签看得见。
Padding gives it a comfortable shape.
padding 让它有一个舒服的形状。
And margin-right keeps the tags off each other, so they read as three things instead of one long stripe.
而 margin-right 让这些标签互相分开， 于是它们读起来是三样东西，而不是一条长条。
Two properties, two different jobs, one row.
两个属性，两种不同的职责，同一行里。
Now the tasks: margin around the boxes, then space below the heading.
现在做那两道题：给盒子加 margin，再给标题下面加间距。
Four things to take with you.
带走四点。
One: margin is the gap outside a box, between neighbours.
第一：margin 是盒子外面的间隙，位于邻居之间。
Two: padding is the space inside, around the content.
第二：padding 是里面的空间，围着内容。
Three: name a side to space just that one.
第三：写上某一边的名字，就只给那一边加间距。
Four: margin-bottom under a heading is the everyday one.
第四：标题下面的 margin-bottom 是最常用的那一个。
Now do both tasks.
现在把两道题都做一下。