I don't edit CSS very often, and almost every time I need to go and google the CSS box model to check whether padding is inside the border and margin outside, or vice versa. (Just checked again and padding is inside).
我不经常编辑CSS，几乎每次我需要去谷歌CSS框模型，以检查填充是否在边框内，边框外是否有边框，反之亦然。(再检查一下，里面有填充物)。
Does anyone have a good way of remembering this? A little mnemonic, a good explanation as to why the names are that way round ...
有没有人能记住这个?一个小小的记忆，一个很好的解释为什么这些名字是这样的……
15 个解决方案
#1
138
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.
当使用CSS的时候，你最终会疯狂地使用填充单元格，他们会把你放在里面，在墙里面有填充。
#2
4
pin - P is in
pin - P在里面
#3
3
Print the diagram from the Box Dimensions section of the specification, and put it on the wall.
从说明书的箱型尺寸部分打印出图表，并贴在墙上。
#4
3
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.
一旦你用CSS做了足够的工作，记住这一点就会成为你的第二天性。
#5
3
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.
真的，如果你给身体一个空白和背景，你应该看到它周围的白色条纹。然而，这并不是情况——主体的填充与页边距是相同的。这就为box模型建立了一些不正确的东西。
I usually think about it like this:
我通常是这样想的:
- margin = spacing around the box;
- 边距=框边间距;
- border = the edge of the box;
- 边框=框的边;
- padding = space inside the box.
- 填充=盒子里的空间。
#6
3
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.
你在用一个盒子。如果你在盒子里放一些东西，你可以在里面放一些填充物，以确保它不会撞到盒子的两边。保证金是另一回事。
#7
3
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.
衬垫通常用在里面。不管是在墙上还是在送货箱里，这都很简单。如果边距在里面，那么边距在外面。不应该太辛苦。
#8
2
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.
Tim Saunders给出了一些非常好的建议——当我第一次开始使用CSS时，我重点构建了一个良好的、完全注释的基本样式表。样式表已经改变了很多次，仍然是一种很棒的资源。
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...;-)
然而，当我遇到我自己的盒子模型问题时，我开始使用“Mo Pi”。比如，“我不够胖，我要吃莫皮。”很奇怪，但对我有用。当然，我在学习CSS的时候增加了20磅……
#9
1
use firebug to help you see.
使用firebug帮助您查看。
#10
1
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.
您还可以添加一些注释或例子，关于其他难以记住的东西或东西是反直觉的。
#11
1
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.
事实上，元素周围的临时边界是一种有用的工作方式，这样您就可以看到为什么浮动会下降，等等。
#12
1
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.
我知道这是对你问题的回答，但更多的是一个提示。每当我处理边距和边距时，我都会在你要处理的部分周围添加一个边距，然后从那里开始，它会显示我要处理的房间。当我一切就绪，我就移走边界。
#13
0
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.
填充是元素绘画的一部分:它扩展了元素的背景。将一对元素+填充视为共享公共背景是有意义的。填充类似于油画的画布:填充越大，画布越大，背景也就越大。边框(画的框架)会围绕着这一对。边缘将画廊墙上的画分开。考虑对象背景的概念有助于将对象和填充结合在一起。通常关于内在与外在的解释都不会被记住:过了一段时间，每个人都回到了最初的困惑。还要记住，边距是垂直可折叠的，而填充则不是。
#14
0
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.
不要一遍又一遍地问谷歌，你只需使用检查窗口。在style选项卡中，向下滚动到底部，就像这样。
#15
-1
Margin:When you want move the block. Padding: When you want move the items within a block.
边距:当你想移动方块时。填充:当您想要在一个块中移动项目时。
#1
138
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.
当使用CSS的时候，你最终会疯狂地使用填充单元格，他们会把你放在里面，在墙里面有填充。
#2
4
pin - P is in
pin - P在里面
#3
3
Print the diagram from the Box Dimensions section of the specification, and put it on the wall.
从说明书的箱型尺寸部分打印出图表，并贴在墙上。
#4
3
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.
一旦你用CSS做了足够的工作，记住这一点就会成为你的第二天性。
#5
3
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.
真的，如果你给身体一个空白和背景，你应该看到它周围的白色条纹。然而，这并不是情况——主体的填充与页边距是相同的。这就为box模型建立了一些不正确的东西。
I usually think about it like this:
我通常是这样想的:
- margin = spacing around the box;
- 边距=框边间距;
- border = the edge of the box;
- 边框=框的边;
- padding = space inside the box.
- 填充=盒子里的空间。
#6
3
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.
你在用一个盒子。如果你在盒子里放一些东西，你可以在里面放一些填充物，以确保它不会撞到盒子的两边。保证金是另一回事。
#7
3
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.
衬垫通常用在里面。不管是在墙上还是在送货箱里，这都很简单。如果边距在里面，那么边距在外面。不应该太辛苦。
#8
2
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.
Tim Saunders给出了一些非常好的建议——当我第一次开始使用CSS时，我重点构建了一个良好的、完全注释的基本样式表。样式表已经改变了很多次，仍然是一种很棒的资源。
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...;-)
然而，当我遇到我自己的盒子模型问题时，我开始使用“Mo Pi”。比如，“我不够胖，我要吃莫皮。”很奇怪，但对我有用。当然，我在学习CSS的时候增加了20磅……
#9
1
use firebug to help you see.
使用firebug帮助您查看。
#10
1
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.
您还可以添加一些注释或例子，关于其他难以记住的东西或东西是反直觉的。
#11
1
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.
事实上，元素周围的临时边界是一种有用的工作方式，这样您就可以看到为什么浮动会下降，等等。
#12
1
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.
我知道这是对你问题的回答，但更多的是一个提示。每当我处理边距和边距时，我都会在你要处理的部分周围添加一个边距，然后从那里开始，它会显示我要处理的房间。当我一切就绪，我就移走边界。
#13
0
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.
填充是元素绘画的一部分:它扩展了元素的背景。将一对元素+填充视为共享公共背景是有意义的。填充类似于油画的画布:填充越大，画布越大，背景也就越大。边框(画的框架)会围绕着这一对。边缘将画廊墙上的画分开。考虑对象背景的概念有助于将对象和填充结合在一起。通常关于内在与外在的解释都不会被记住:过了一段时间，每个人都回到了最初的困惑。还要记住，边距是垂直可折叠的，而填充则不是。
#14
0
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.
不要一遍又一遍地问谷歌，你只需使用检查窗口。在style选项卡中，向下滚动到底部，就像这样。
#15
-1
Margin:When you want move the block. Padding: When you want move the items within a block.
边距:当你想移动方块时。填充:当您想要在一个块中移动项目时。