如何从 Zurb Foundation 中删除 body 周围的多余空格

Question

我正在为我的网站使用 Foundation 框架，整个 body（排水沟）周围有一个额外的 white-space。要移除我试过的排水沟：

1. *{边距:0;填充:0;}
2. body{边距:0;填充:0;}
3. 正在下载间距设置为 0 的自定义 Foundation

None 其中对我有用。如何删除多余的 white-space?

Here's the screenshot with gutter highlighted with red

Answer 1

这很可能不是边距问题，而是最大宽度问题。使用 DevTools，您可能会发现 .row class 的最大宽度为 62.5rem，我认为这是标准的。 （我在修改宽度为 72.5rem 的网站上工作。）

我认为如果您有人们必须在大屏幕上实际阅读的正常页面内容，那么保留此限制的某个版本是个好主意。但是您可以在需要 100% 宽度的地方安全地覆盖它。

您可以通过添加一个 class 来实现这一点，该 class 会覆盖默认的最大宽度，并在您的样式中选择具有足够特异性的相关元素 sheet。

或者，您可以避免在要跨越页面的外部容器上使用 class .row。这允许您选择将行放在其中。例如，您可以通过这种方式让您的蓝绿色背景横跨整个页面，但保持内容受限并与下方基于网格的常规内容对齐。

您可以阅读有关 Foundation 网格的更多信息 here，包括如何通过 SASS 变量自定义行宽（如果您喜欢此类内容）。