网站下方的小空白区域答案

【问题标题】：Small white space going down side of website网站下方的小空白区域
【发布时间】：2018-03-19 16:36:30
【问题描述】：

对于我正在构建的这个网站，我最近遇到了一条从右侧向下延伸的白色小条。当我知道没有那条线并且它仍然存在时，我已经将我的更改回滚了。我试图找到推动它的CSS，但我不能。唯一侵犯该空白的元素是我的导航栏，但它的宽度是 100%，所以它不应该扩展视口。

如何找到强制使用该空格的 CSS 规则？

网址是：https://meganandadam2018.com

【问题讨论】：

我需要查看您的代码，但如果我不得不猜测它可能是由其中一个元素上的 margin 或 margin-right 引起的。
我在 Chrome/Mac 上没有看到它 - 您是否可以通过回滚修复它并且只看到缓存版本？
Here 是一个在侧面显示白条的小提琴。
margin-right:4px 导致空白。您可能想改用 padding-right: 4px。

标签： html css

【解决方案1】：

删除该课程的空白。如果你已经有 100% 的宽度，设置更多的边距会使 div 展开：

.home-sec-3 #radio-button-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin: 10px 0px 10px 0px; // here is the problem, set right and left to 0
    width: 100%;
}

【讨论】：

太棒了，解决了！为了保留我的空白，我将边距更改为填充！
@AdamMcGurk 这是正确的，详细说明一下... box-sizing: border-box 边框和填充被计算为宽度，但边距不是。所以你的width: 100%; 实际上是 100% + 10px margin-left + 10px margin-right 导致溢出。

【解决方案2】：

您可以从 body 和 html 中删除 height: 100% 并添加 overflow-x: hidden;

【讨论】：