我并不常编辑CSS, 几乎每次需要去谷歌CSS盒模型来检查padding是在边框border内还是外，以及margin是内部还是外部。(我再次检查了一遍，padding是在内部的)。
有没有人有好的记忆方法？一个小助记符、一个解释为什么名称会这样排列的好方法......
15个回答
153
当你与CSS工作时，如果最终把你逼疯了，那么他们将把你放在带有内衬填充的隔离室里。
- Si
1
14我一生中见过的对技术问题最有创意的回答。 - bbonamin
5
您正在使用一个盒子。如果您要将某物放入盒子中，您需要在内部放置一些填充物以确保其不会撞击到边缘。而外边距则是另一件事。
- Mr Scratch
5
pin - P is in
- Niyaz
4
对我来说，“padding”听起来比“margin”更内在。也许考虑印刷页面会有所帮助？边距是远离页面外部的区域 - 通常，您甚至无法打印到边缘 - 它们是不可标记的。在这些边距内，可以填充内容以提供内容和边距之间的额外屏障。
一旦您足够熟练地使用CSS，记住这一点将变得自然而然。
- Chris Marasti-Georg
3
内边距通常用于内部。无论是墙壁的内部还是送货箱的内部，都很简单。如果内部有内边距，则外部就会有外边距。这不应该太难理解。
- user3272652
3
我学习它的时间并不长 - 盒模型相当简单，但人们发现难点在于 body 并没有在视觉上打破模型。
实际上，如果您给 body 添加边距和背景色，应该会看到它被一个白色条包围。然而，情况并非如此 - body 的填充与边距相同。这导致了盒模型的一些错误理解。
我通常这样想：
- margin = 盒子周围的间距；
- border = 盒子的边缘；
- padding = 盒子内部的空间。
- Ross
1
主要的原因是因为“width”包括边框和外边距的大小。在我看来，ie5实际上做得很好。 - kibibu
2
Tim Saunders给出了一些极好的建议——当我开始学CSS时，我特意构建了一个良好且有充分注释的基础样式表。这个样式表已经变化多次，但它仍然是一个非常有用的资源。
然而，当我遇到自己的盒模型问题时，我开始使用'Mo Pi'。就像，“我不够胖，我需要吃更多派。”很奇怪，但它对我有效。当然，在学习CSS时，我增加了20磅体重...;-)
- Greg Hluska
2
使用 Firebug 帮助您查看。
- RedWolves
1
添加边框，即使只是暂时的。当您尝试不同的数字时，您会看到差异。
事实上，围绕元素的临时边框是一种有用的工作方式，这样您就可以看到为什么浮动会下降等。
- John Dunagan
1
我喜欢使用CSS轮廓线而不是边框——相同的概念，但它不会影响布局。因此，如果您有一个宽度为100％的div并添加了边框，则会在浏览器中添加水平滚动条。 "轮廓线"没有这样的影响！ - user1380540
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接