The box model
Web Basics — HTML & CSS Lesson 16 2:19 English narration · English + 中文 subtitles burned in
Chapters
Transcript
CSS treats every single element as a box, and every box has four layers.
CSS 把每一个元素都当作一个盒子，而每个盒子都有四层。
In the middle is the content — your text or your picture.
最中间是内容——你的文字或图片。
Around that is padding: space inside, between the content and the edge.
围着它的是内边距 padding：内容与边缘之间、在里面的那圈空间。
Then the border: the line around the whole thing.
再往外是边框 border：绕着整个东西的那条线。
And outside the border, margin: space outside, which keeps other boxes away.
而边框之外是外边距 margin：外面的空间，把别的盒子推开。
Content, padding, border, margin — always in that order, from the inside out.
内容、内边距、边框、外边距—— 永远是这个顺序，从里到外。
Padding is what makes a box feel comfortable rather than cramped.
内边距是让盒子显得舒展、而不是憋屈的东西。
Write padding twenty pixels and you add twenty pixels of space on all four sides, between the content and the edge.
写 padding: 20px，你就在四条边上各加了 20 像素的空间， 加在内容和边缘之间。
The words did not change; the box grew around them.
文字没有变；是盒子围着它变大了。
And that space sits inside the border, which is the detail that separates padding from margin.
而这段空间位于边框的里面， 这正是把 padding 和 margin 区分开来的那个细节。
Border takes three values in one go, and the order is fixed.
border 一次接收三个值，而且顺序是固定的。
First how thick the line is, in pixels.
先是线有多粗，单位是像素。
Then its style — solid, dashed or dotted.
然后是它的样式——solid 实线、dashed 虚线，或 dotted 点线。
Then what colour it is.
再然后是它是什么颜色。
Two pixels, solid, navy.
2 像素、实线、藏青色。
Leave the style out and you get no line at all, which is a confusing five minutes if you do not know to look for it.
把样式漏掉，你会一条线都看不到， 而如果你不知道该往哪儿找，那会是让人困惑的五分钟。
One confusion is worth heading off now, because it costs people hours.
有一个混淆现在就该说清楚，因为它会让人白花几个小时。
Padding is inside the border and makes the box itself bigger.
padding 在边框里面，它让盒子本身变大。
Margin is outside it and pushes its neighbours away, leaving the box the same size.
margin 在边框外面，它把邻居推开，而盒子本身大小不变。
If a gap is not appearing where you expected, ask which of those two you actually wanted.
如果某个间隙没有出现在你预期的地方， 先问问自己，你真正想要的是这两个中的哪一个。
Now the tasks: padding on the box, then a border — width, style, colour.
现在做那两道题：给盒子加 padding，再加一条边框——宽度、样式、颜色。
Four things to take with you.
带走四点。
One: the order is content, then padding, then border, then margin.
第一：顺序是内容、内边距、边框、外边距。
Two: padding is space inside, around the content.
第二：padding 是里面的空间，围着内容。
Three: border takes a width, a style and a colour, in that order.
第三：border 依次取宽度、样式和颜色。
Four: margin is space outside, between boxes — and that is the whole of the next lesson.
第四：margin 是外面的空间，位于盒子之间—— 而那正是下一课的全部内容。
Now do both tasks.
现在把两道题都做一下。