如何在CSS中记住边距在边界之外，以及填充内部

Question

我不经常编辑CSS，几乎每次我都需要去CSS box model查看padding是否在border和margin内在外面，反之亦然。 （刚刚检查过，padding在里面）。

有没有人有一个很好的记忆方法？一个小小的助记符，一个很好的解释，为什么这些名字就是这样的...

Answer 1

使用CSS时最终会让你发疯，他们会让你进入的填充单元格在墙壁的里面上有填充。

Answer 2

pin - P在

中

Answer 3

您正在使用一个盒子。如果你把东西放在一个盒子里，你会在里面放一些衬垫，以确保它不会碰到两侧。保证金将是另一回事。

Answer 4

从规范的Box Dimensions部分打印图表，并将其放在墙上。

Answer 5

对我而言，“填充”听起来比“边缘”更内在。也许考虑打印页面会有帮助吗？边距是远在外面的区域 - 通常，你甚至不能打印到边缘 - 它们是不起眼的。在这些边距内，内容可以填充以在内容和边际之间提供额外的障碍吗？

一旦你在CSS中工作，它就会成为记住这一点的第二天性。

Answer 6

填充通常在里面使用。无论是在墙壁内部还是在送货箱上，这都很简单。如果填充在里面，那么边距就在外面。不应该太难。

Answer 7

我刚刚学会了它 - 盒子模型相当简单，但人们发现它很难的主要原因是因为body没有明显破坏模型。

真的，如果你给body一个边距和一个背景，你应该看到它被一个白色条带包围。但事实并非如此 - body的填充与边距相同。这就建立了一些关于盒子模型的错误信息。

我通常会这样想：

• margin =盒子周围的间距;
• border =盒子的边缘;
• padding =盒子内的空间。

Answer 8

蒂姆·桑德斯提出了一些很好的建议 - 当我第一次开始使用CSS时，我提出了构建一个完整评论的基本样式表的重点。该样式表已经多次改变，仍然是一个非常好的资源。

然而，当我遇到自己的盒子模型问题时，我开始使用'Mo Pi'。如同，“我不够胖，我需要吃mo pi。”奇怪，但它对我有用。当然，我在学习CSS的时候增加了20磅......; - ）

Answer 9

使用萤火虫来帮助你看。

Answer 10

创建一个注释的基本样式表，您可以在需要创建新站点或编辑现有站点时将其用作模板。

您可以随着知识的增长添加它，并将其应用于各种不同的浏览器，以查看各种事物的行为。

您还可以添加其他难以记住的内容或反直觉的内容的评论或示例。

Answer 11

添加边框，即使是暂时的。当你玩这些数字时，你会看到差异。

事实上，元素周围的临时边界是一种有用的工作方式，这样你就可以看到漂浮物掉落的原因等等。

Answer 12

我知道这是你问题的答案，但更多的是小费。每当我处理边距和填充时，我会在你正在使用的部分周围添加一个边框，然后从那里，它向我显示我必须使用的房间。当我全部完成后，我将删除边框。

Answer 13

PAdding是元素的PAinting的PArt：它扩展了元素的背景。将对元素+填充视为共享共同背景是有意义的。填充类似于绘画的画布：填充越大，画布越大，因此背景越大。边框（画的框架）会围绕那对。 margin 将分隔画廊墙上的画作。考虑对象背景的概念有助于将对象+填充粘合在一起。内部与外部的通常解释不会留在记忆中：过了一段时间，每个人都会回到原来的混乱状态。还要记住，边距是垂直可折叠的，而填充则不是。

Answer 14

而不是一次又一次地要求谷歌你只需使用检查窗口。在该样式选项卡中，向下滚动到底部，您可以看到这样。

Answer 15

保证金：当你想要移动块时。 填充：当您想移动块内的项目时。