CSS中的“属性：0”或“属性：0px”？答案

【问题标题】：'property: 0' or 'property: 0px' in CSS?CSS中的“属性：0”或“属性：0px”？
【发布时间】：2021-05-17 22:07:35
【问题描述】：

我经常看到这种表示法，我想知道这两种表示法之间有什么显着区别吗？

element#id
{
  property: 0;
}

和

element#id
{
  property: 0px;
}

我一直使用property: 0px;，因为我发现它看起来更干净，但我不确定浏览器对0px 的解释是否与0 不同。

有谁知道哪个更好或更正确？

【问题讨论】：

好问题，早于这个可能的重复：stackoverflow.com/q/5359222/292060，但引用规范的答案更好。
无论您使用哪个，请确保在整个项目中保持一致。

标签： css properties zero

【解决方案1】：

单位标识符是可选的，但没有明显的性能提升（尽管您正在节省了两个字符）。

CSS2 -来自W3C CSS 2.1 Specification for Syntax and basic data types：

长度值的格式（在本规范中用表示）是一个（带或不带小数点）紧跟一个单位标识符（例如px、em等）。 长度为零后，单位标识符是可选的。

（强调我的）

CSS3 -来自W3C CSS Values and Units Module Level 3（在撰写本文时，当前位于Candidate Recommendation）

对于零长度单位标识符是可选的（即可以在语法上表示为 0）。

【讨论】：

怀疑当 GZIP 压缩激活时你真的节省了 2 个字节。对我来说，这是你感觉舒服的问题。不过，一些 CSS Linters 可能不喜欢 0px。

【解决方案2】：

虽然当值为 0 时该单位是可选的，但我倾向于将其保留，因为我可以使用 Chrome 的开发人员工具通过单击该值并按向上/向下箭头键来调整这些值。没有单位，那是不可能的。

此外，CSS 缩小器无论如何都会从 0 值中去除单位，所以最终它并不重要。

【讨论】：

+1 用于观察 minifiers 知道这一点，并且通过包含它们可以获得功能。
如果您在没有标识符的 0 上按向上/向下箭头键，Chrome 的开发者工具默认为 px。另外，在 Chrome 的开发者工具中，如果你向下箭头到 0，它会保留 px。
@testing123：我认为在我写这个答案的时候还没有，但很高兴知道。
如果在应用程序的多个地方使用 0 和 0px 会不会有执行时间问题？

【解决方案3】：

它们是一样的。浏览器将两者都解释为 0，因此请选择对您来说更具可读性的内容。

【讨论】：

是否有“正确”或符合标准的选择？我知道你不能写border: 3 solid，因为没有单位，但是有没有关于零的网络标准？
正如我在回答中提到的那样，这是因为它们都是相同的：零乘以任何东西仍然是零，无论您是乘以像素大小、em、ex 还是乘以百分比。
不确定您所说的网络标准是什么意思，但“margin: 10px 0 0 10px”可以正常工作，“border: 0”也是如此，这意味着您可以将零用作“none”的等价物。跨度>
@blender 在下面查看我的答案，了解带有文档链接的 Web 标准。
-1 的答案包含有争议的内容，没有任何参考、链接或理由。请用数据支持您的意见或明确说明这只是您的意见，而不是事实信息。

【解决方案4】：

任何事物的零都是零。 0px = 0% = 0em = 0pt = 0

大多数人将设备关闭是因为它只是不必要的混乱。

【讨论】：

时间单位例外：0 不是0s / 0ms 的有效替代品
我的浏览器对0% 和0 或0px 显示不同：jsfiddle.net/q7mad3wz/23

【解决方案5】：

据我所知，它们之间没有区别，因为0px = 0em = 0ex = 0% = 0。作为开发人员，完全由您来决定您最喜欢什么（当然，除非您有需要遵循的公司编码标准）。

从我看到的大多数代码示例中，大多数人使用无单位版本。对我来说，它只是看起来更干净。如果您要推送大量数据（例如，如果您是 Google），那么这两个字节可能会增加大量带宽，尤其是因为您很可能在样式表中重复它们多次。

【讨论】：

如果您要推送大量数据（例如，如果您是 Google），则最好使用为您执行此操作的缩小工具：p

【解决方案6】：

零像素等于零英寸和零米等等。 0 就是你所需要的。

【讨论】：

有那么一会儿，我打算否决您的帖子，因为我认为您关于 0 像素等于 0 英寸的说法是错误的。 :) 因为在我的脑海里我在想那怎么可能呢？它们是不同的单位。

【解决方案7】：

我个人觉得0 比0px 干净。这是两个可以加起来的额外字符。为什么在不需要时添加额外的字节。我看到padding: 0px 0px 0px 0px 可以很容易地表达为padding: 0 太频繁了。

【讨论】：

【解决方案8】：

您可以使用其中任何一种 - 我最好的建议是不要太担心，但要始终如一地这样做。我个人更喜欢指定“0px”，原因如下：

使用 0px 可使事物与您指定的所有其他“px”大小更加一致
它也更加冗长，清楚地表明您正在设置零长度而不是“关闭此功能”标志
如果需要，调整“0px”值使其成为另一个值会稍微容易一些

【讨论】：

【解决方案9】：

正如其他人所说，它是否为 0 并不重要，尽管我选择将测量值添加到我的所有值中，以便其他查看我的 CSS 文件的人可以判断他们可能在其他地方处理的测量值.

【讨论】：

【解决方案10】：

我知道0px和0之间应该没有区别，但我发现有时有。

我试图将这样的对象居中：

position: absolute;
left: max(0px, calc((100vw - 400px)/2));
max-width: 400px;

它可以工作，但如果你用0 代替0px，它就不行。

【讨论】：

【解决方案11】：

零单位零值不需要单位。在 CSS 中保存字节的一种简单方法是在值为 0 时不包含单位。例如，0px 和 0 完全相同...

http://csslint.net/index.html

【讨论】：