在 CSS 中指定边距和填充的正确方法是什么？答案

【问题标题】：What is the correct way to specify margin and padding in CSS?在 CSS 中指定边距和填充的正确方法是什么？
【发布时间】：2014-01-26 16:14:47
【问题描述】：

这些是 CSS 中 margin 和 padding 的有效值吗？

margin: 0px 10px;
padding: 5px 0px 10px;

我认为您总是必须指定所有四个方面：

margin: 0px 10px 0px 0px;
padding: 5px 0px 10px 0px;

另外，当我编写像 margin: 0px 10px 0px 0px; 这样的 CSS 时，我的编辑器 IntelliJ 警告我 px 是多余的。像这样的属性应该写不同的吗？

对于阅读这篇文章的任何人来说，答案在于所有的回复。每个都阐明了速记方面。感谢所有回复的人。

【问题讨论】：

标签： css margin padding

【解决方案1】：

您选择的方式取决于布局。

如果每一面都不同，那么你的每一面都会有所不同。
margin: 10px, 15px, 20px, 25px;（当然你可以随时使用它，但这是最好的例子）。

如果顶部和侧面相同，则只需为顶部和底部输入第一个数字，为侧面输入第二个数字。
margin: 10px, 20px;

如果您希望所有 4 个边具有相同的边距，那么
margin: 10px; 会做所有 4 个。

【讨论】：

【解决方案2】：

它们都是正确的，它们只是不同的写作方式。

长符号：

margin|padding: top right bottom left;

简写：

margin|padding: top left&right bottom;
margin|padding: top&bottom left&right;
margin|padding: top&right&bottom&left;

对于第二个问题：如果你写0px，单位是多余的，因为零是零，不管单位，所以你也可以写0，不带任何单位。

另见the CSS documentation

【讨论】：

非常简洁的@Florian Peschka
我通过使用“TRBL”记住这一点 - 即“麻烦” - 右上角左下角
@AdamMarshall ... 或“顺时针分配”

【解决方案3】：

您不必始终指定所有四个属性。在您的情况下，margin: 0px 10px 0px 0px; 可以更好地写为margin-right: 10px;，如果所有其他边距值已经为 0。另外，如果值为 0，则无需添加 px。

也看看速记符号，

margin: 0px; (top, right, bottom, left - 0px)

margin: 2px 4px; (top and bottom - 2px, right and left - 4px)

margin: 2px 4px 6px; (top - 2px, right and left - 4px, bottom - 6px)

【讨论】：

这非常有用，因为我从不知道对于属性，您可以拥有比 TRBL 更少的任何东西。我一直认为 margin 本身是避免使用所有其他标识符（例如 margin-top 等）的简写。

【解决方案4】：

您可以指定少于 4 个作为“速记”，即同时将多个属性设置为相同的值；例如the CSS documentation says:

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

当（仅当）值为0时，维度（例如px）是冗余的。

【讨论】：

感谢您对 0 值的明确说明。