You are using a box. If you were putting something in a box you would put some padding inside to make sure it didn't smack against the sides. Margin would then be the other thing.
To me, "padding" just sounds more inner than "margin". Perhaps thinking about the printed page would help? Margins are areas on the far outside - generally, you cannot even print to the edge - they are unmarkable. Within those margins, the content could be padded to provide an extra barrier between the content and the margin?
Once you work in CSS enough, it'll become second nature to remember this.
随着时间的推移，我刚刚学会了它 - 盒子模型相当简单，但人们发现它很难的主要原因是因为 body 并没有明显破坏模型。
实际上，如果你给 body 一个边距和一个背景，你应该会看到它被一条白色的条带包围。 然而事实并非如此 - body 的填充与边距相同。 这建立了关于盒子模型的一些不正确的事情。
我通常这样想：
边距=盒子周围的间距；
border = 盒子的边缘；
padding = 盒子内的空间。
I've just learnt it over time - the box model is fairly simple but the main reason people find it hard is because body doesn't visibly break the model.
Really, if you give body a margin and a background you should see it surrounded by a white strip. However this isn't the case - body's padding is the same as margin. This establishes a few incorrect things about the box model.
Padding is usually used inside. Either on the interior of a wall or a delivery box, that's simple. And if padding is inside, then margin is outside. Shouldn't be too hard.
Tim Saunders gave some excellent advice - when I first got started with CSS, I made a point of building a good, fully commented base stylesheet. That stylesheet has changed many times and remains a terrific resource.
However, when I ran into my own box model problems, I started using 'Mo Pi'. As in, "I'm not fat enough, I need to eat mo pi." Strange, but it worked for me. Of course, I put on twenty pounds while learning CSS...;-)
I know this is an answer to your question, but more of a tip. Whenever I am dealing with margin and padding, I will add a border around the part you are working with, then from there, it shows me the room I have to work with. When I am all set, I remove the border.
PAdding is a PArt of an element's PAinting: it extends the element's background. It makes sense to think of a pair element+padding as sharing a common background. Padding is analogous to the painting's canvas: the bigger the padding, the bigger the canvas and therefore background. Border (the painting's frame) would go around that pair. And margin will separate paintings on the gallery wall. Thinking about the concept of object background helps glue the pair object+padding together. The usual explanations of what is inside vs outside do not stick to memory: after a while everybody gets back to the original confusion. Remember also that margins are vertically collapsible and padding is not.
发布评论
评论（15）
边距：当你想要移动方块时。
填充：当您想要移动块内的项目时。
Margin:When you want move the block.
Padding: When you want move the items within a block.
当使用CSS最终让你发疯时，他们将把你放入的填充单元格的填充在墙壁的内部上。
When working with CSS finally drives you mad the padded cell that they will put you in has the padding on the inside of the walls.
引脚 - P 处于
pin - P is in
你正在使用一个盒子。 如果你要把东西放进盒子里，你会在里面放一些填充物，以确保它不会撞到侧面。 那么保证金就是另一回事了。
You are using a box. If you were putting something in a box you would put some padding inside to make sure it didn't smack against the sides. Margin would then be the other thing.
打印规范的 盒子尺寸 部分中的图表，并把它贴在墙上。
Print the diagram from the Box Dimensions section of the specification, and put it on the wall.
对我来说，“填充”听起来比“边距”更内在。 也许考虑一下打印的页面会有帮助？ 边距是最外侧的区域 - 通常，您甚至无法打印到边缘 - 它们是无法标记的。 在这些边距内，可以填充内容以在内容和边距之间提供额外的屏障吗？
一旦你足够熟练地使用 CSS，记住这一点就会成为你的第二天性。
To me, "padding" just sounds more inner than "margin". Perhaps thinking about the printed page would help? Margins are areas on the far outside - generally, you cannot even print to the edge - they are unmarkable. Within those margins, the content could be padded to provide an extra barrier between the content and the margin?
Once you work in CSS enough, it'll become second nature to remember this.
随着时间的推移，我刚刚学会了它 - 盒子模型相当简单，但人们发现它很难的主要原因是因为
body并没有明显破坏模型。实际上，如果你给
body一个边距和一个背景，你应该会看到它被一条白色的条带包围。 然而事实并非如此 -body的填充与边距相同。 这建立了关于盒子模型的一些不正确的事情。我通常这样想：
I've just learnt it over time - the box model is fairly simple but the main reason people find it hard is because
bodydoesn't visibly break the model.Really, if you give
bodya margin and a background you should see it surrounded by a white strip. However this isn't the case -body's padding is the same as margin. This establishes a few incorrect things about the box model.I usually think about it like this:
内部通常使用填充物。 无论是在墙壁内部还是在送货箱上，这都很简单。 如果内边距位于内部，则边距位于外部。 不应该太难。
Padding is usually used inside. Either on the interior of a wall or a delivery box, that's simple. And if padding is inside, then margin is outside. Shouldn't be too hard.
用firebug帮你看看。
use firebug to help you see.
Tim Saunders 给出了一些极好的建议——当我第一次开始使用 CSS 时，我特别注意构建一个良好的、带有完整注释的基本样式表。 该样式表已更改多次，并且仍然是一个很棒的资源。
然而，当我遇到自己的盒子模型问题时，我开始使用“Mo Pi”。 比如说“我还不够胖，我要吃毛皮”。 奇怪，但它对我有用。 当然，我在学习 CSS 的过程中体重增加了 20 磅……;-)
Tim Saunders gave some excellent advice - when I first got started with CSS, I made a point of building a good, fully commented base stylesheet. That stylesheet has changed many times and remains a terrific resource.
However, when I ran into my own box model problems, I started using 'Mo Pi'. As in, "I'm not fat enough, I need to eat mo pi." Strange, but it worked for me. Of course, I put on twenty pounds while learning CSS...;-)
为自己创建一个带注释的基本样式表，每当您需要创建新网站或编辑现有网站时，都可以将其用作模板。
随着知识的增长，您可以添加它，并将其应用到各种不同的浏览器中，以了解各种事物的行为方式。
您还可以添加有关其他难以记住的内容或违反直觉的内容的评论或示例。
Create yourself a commented base stylesheet which you can use as a template whenever you need to create a new site or edit an existing site.
You can add to it as you grow in knowledge and apply it to various different browsers to see how various things behave.
You'll also be able to add in comments or examples about other hard to remember stuff or stuff that is counter intuitive.
添加边框，即使只是暂时的。 当您处理这些数字时，您会发现其中的差异。
事实上，元素周围的临时边框是一种有用的工作方式，这样您就可以了解为什么浮动会下降等。
Add border, even just temporarily. As you play with the numbers, you'll see the difference.
In fact, temporary borders around elements is a helpful way to work, such that you can see why floats are dropping, etc.
我知道这是对你问题的回答，但更多的是一个提示。 每当我处理边距和填充时，我都会在您正在使用的部分周围添加一个边框，然后从那里开始，它会向我显示我必须使用的房间。 当一切准备就绪后，我删除了边框。
I know this is an answer to your question, but more of a tip. Whenever I am dealing with margin and padding, I will add a border around the part you are working with, then from there, it shows me the room I have to work with. When I am all set, I remove the border.
PAdding 是元素 PAinting 的一部分：它扩展了元素的背景。 将元素+填充对视为共享共同背景是有道理的。 填充类似于绘画的画布：填充越大，画布越大，因此背景也越大。 边框（画作的框架）将围绕那对。 边距将画廊墙上的画作分开。 考虑对象背景的概念有助于将对象+填充对粘合在一起。 对内部和外部的通常解释并不能牢牢记住：过了一会儿，每个人都会回到原来的困惑。 还要记住，边距是垂直可折叠的，而内边距则不能。
PAdding is a PArt of an element's PAinting: it extends the element's background. It makes sense to think of a pair element+padding as sharing a common background. Padding is analogous to the painting's canvas: the bigger the padding, the bigger the canvas and therefore background. Border (the painting's frame) would go around that pair. And margin will separate paintings on the gallery wall. Thinking about the concept of object background helps glue the pair object+padding together. The usual explanations of what is inside vs outside do not stick to memory: after a while everybody gets back to the original confusion. Remember also that margins are vertically collapsible and padding is not.
您只需使用检查器窗口即可，而不必一次又一次地询问谷歌。 在该样式选项卡中，向下滚动到底部，您可以看到这样的内容。
Instead of ask again and again to google you just use inspector window. In that style tab and scroll down to bottom you can see like this.