使用百分比作为填充/边距/边框的高度可以比 em 更好吗？

Posted 2023-03-06

【中文标题】使用百分比作为填充/边距/边框的高度可以比 em 更好吗？

【英文标题】：Can using percentages for height of padding/margin/border be better than em?

【发布时间】：2012-11-21 02:26:33

【问题描述】：

对于垂直 CSS 声明，百分比值有哪些好的和推荐的用法？

换句话说，在响应式设计下，我们是否忽略了 % 比 em 更有利的东西？

因为似乎在大多数情况下（除了您希望所有边相等的情况；credit），em 会比% 更好，请考虑：

在 CSS 中对元素的内边距、边距或边框的水平值使用百分比是相当标准的——尤其是在响应式网页设计中。例如，以margin-left: 7.2% 和padding: 0 5% 为例。这也是有道理的：屏幕越宽，空间就会成比例的增加。

一个可以对垂直值做同样的事情：

margin-top: 5%;
padding: 10% 0;
border: 1% 0 2% 0;

正如预期的那样，增加视口宽度会增加相应的垂直空间。

但是，在我遇到的情况下，它可能看起来有点奇怪——不适合设计。似乎em 值可能会得到更好的服务。* 但是，另一方面，使用百分比有什么好处？

_{* 因为这些不会随着屏幕的宽度而增加，而是会根据页面的字体大小而增加。}

【问题讨论】：

您应该注意border 属性不授权百分比值。

【参考方案1】：

我最近也在思考这个问题，在网上阅读后，我开始依赖的“经验法则”如下。首先，% 之所以是横轴的良好响应式设计，是因为众所周知，浏览器的宽度可能会因用户使用手机还是计算机而有很大差异。然而，垂直轴是不同的，因为虽然它也可以像水平轴一样变化，但许多网页都是为垂直滚动而创建的，并且用户希望向下滚动。在这种情况下，由于 em 响应性较差，因此垂直滚动多一点就可以了。

要基于该假设回答您的问题，您将使用 % 作为垂直边距的时间是当您的设计不希望用户滚动太多以查看页面的一部分时。具体示例可能是您不希望任何滚动的单页 Web 应用程序或标题或初始页面内容，例如您希望用户无需向下滚动即可完整查看的图片。

【参考方案2】：

是的，视情况而定，就像任何其他 css 练习一样。

假设您有一个使用 100% 屏幕高度的容器 div，并且您希望在 div 顶部显示一个标题。你可以在你的标题上说margin-top: 15px，这很有效，但是如果我来在我的手机上查看它，它看起来会很挤。

因此，您改为使用margin-top: 10%，那么无论我在哪个屏幕上查看您的网站，您的标题始终是 div 顶部的 10%。这意味着您的布局的相对流程将始终相同。

一般规则是这样的：对于任何可以编写的有效 CSS，都有一个用例，它是实现设计目标的最佳方式。忘掉那些说“永远不要使用负边距”或“总是避免绝对定位”或他们扔的任何其他废话的人。

【讨论】：

你说的最后一段是对的，一般规则是没有一般规则，但如果了解@987654323 的情况会很有趣@ 优于 px 和 em?

【参考方案3】：

我认为这个问题没有正确或错误的答案。这确实取决于您的设计。

如您所述，% 值，即使是基于垂直的边距和内边距属性，仍然与文档的 宽度 相关。因此，如果您的设计需要均匀填充，那么所有的 % 值都很棒。

但是，如果设计是面向内容的，并且您仍然在水平属性上使用 % 值进行响应式设计，则 % 可能不是垂直属性的最佳选择。例如，您可能希望 padding-top 正好是 1 行文本的高度。所以你会使用ems。

但我离题了；这确实取决于您的设计和个人喜好。

【讨论】：

谢谢！相等的填充是一个很好的例子，我已经调整了这个问题 - 寻找推荐的用途，其中 % 比 em 更有益？

有时我也会将它用于比例填充，如果垂直填充与水平填充有很大不同，它可能看起来很奇怪。但这与相等填充答案几乎相同。我讨厌成为一个逃避者，但老实说，这真的取决于你的设计。在这种情况下，没有“x 优于 y”。