如何在 CSS 中记住边距在边框之外，而在内部填充 [关闭]

Posted 2023-03-06

【中文标题】如何在 CSS 中记住边距在边框之外，而在内部填充 [关闭]

【英文标题】：How to remember in CSS that margin is outside the border, and padding inside [closed]

【发布时间】：2010-09-07 03:43:35

【问题描述】：

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

有没有人有一个很好的方法来记住这一点？有点助记符，很好地解释了为什么名字是这样的......

【问题讨论】：

它先是边距、边框、内边距，然后是内容。 “很多男孩喜欢蛋糕”怎么样？

【参考方案1】：

当使用 CSS 最终让你发疯时，他们将把你放入的填充单元在墙壁的 inside 上有填充。

【讨论】：

对我一生中见过的技术问题的最有创意的回答。

【参考方案2】：

pin - P 在里面

【参考方案3】：

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

【参考方案4】：

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

【参考方案5】：

对我来说，“填充”听起来比“边距”更内在。也许考虑打印页面会有所帮助？边距是最外面的区域——通常，你甚至不能打印到边缘——它们是无标记的。在这些边距内，可以填充内容以在内容和边距之间提供额外的屏障？

一旦你足够多地使用 CSS，记住这一点将成为第二天性。

【参考方案6】：

随着时间的推移我刚刚学会了它 - 盒子模型相当简单，但人们觉得它很难的主要原因是因为 body 并没有明显破坏模型。

真的，如果你给body 一个边距和一个背景，你应该会看到它被一条白条包围。然而事实并非如此——body 的填充与边距相同。这确立了关于盒子模型的一些不正确的事情。

我通常是这样想的：

margin = 框周围的间距； border = 框的边缘； padding = 框内空间。

【讨论】：

很难的主要原因是因为“宽度”包括边框和边距大小。 IMO ie5 实际上有这个权利

【参考方案7】：

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

【参考方案8】：

用萤火虫帮你看。

【参考方案9】：

Tim Saunders 给出了一些极好的建议——当我第一次开始使用 CSS 时，我特别注意构建一个好的、完全注释的基本样式表。该样式表已经更改了很多次，并且仍然是一个了不起的资源。

但是，当我遇到自己的盒子模型问题时，我开始使用“Mo Pi”。比如，“我还不够胖，我要吃mo pi。”奇怪，但它对我有用。当然，我在学习 CSS 时长了 20 磅……;-)

【参考方案10】：

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

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

您还可以添加有关其他难以记住的内容或违反直觉的内容的 cmets 或示例。

【参考方案11】：

添加边框，即使只是暂时的。当您玩弄这些数字时，您会发现其中的不同。

事实上，元素周围的临时边框是一种有用的工作方式，这样您就可以看到浮动下降的原因等等。

【讨论】：

我不喜欢使用边框，而是使用 CSS 大纲 - 相同的概念，但它对布局没有影响。因此，如果您有一个 100% 宽度的 div 并添加一个边框，它将在浏览器中添加一个水平滚动条。 “大纲”没有这样的效果！

【参考方案12】：

我知道这是对您问题的回答，但更多的是提示。每当我处理边距和填充时，我都会在你正在使用的部分周围添加一个边框，然后从那里，它会告诉我我必须使用的房间。一切就绪后，我移除边框。

【参考方案13】：

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

【参考方案14】：

您只需使用检查器窗口，而不是一次又一次地询问谷歌。在该样式选项卡中并向下滚动到底部，您可以看到这样的内容。

【参考方案15】：

边距：当你想移动块时。 填充：当你想在一个块内移动项目时。