右侧未知边距[重复]答案

【问题标题】：Unknown margin to the right [duplicate]右侧未知边距[重复]
【发布时间】：2021-12-24 04:47:09
【问题描述】：

我的 div 元素包含一个 img 元素，向右有一个未知的大边距。我已将 margin-right 属性显式设置为 0px 无济于事

#pfpbg {
    padding: 5px;
    width: 20%;
    max-width: 20%;
    height: auto;
    margin-right: 0px;
    background-color: #1c1c1c;
    position: relative;
    box-sizing: border-box;
    left: 5%;
}

这是我的完整代码：https://gist.github.com/ballgoesvroomvroom/1919725a254ffdc34d8fbba8b49d7981

我相信这就是导致页面水平溢出的原因。我希望在 html, body 样式中删除 overflow-x: hidden。

我尝试了一个简单的 CSS 重置，但没有解决问题，边距仍然存在。

【问题讨论】：

你的截图显示没有边距。
您需要在问题中发布minimal reproducible example，而不是在其他网站上
您将一个宽度为 100%（默认为 div）的元素从左侧移动 5%。您需要相应地减小元素宽度。 width: calc(100% - 5%);
@connexo 对橙色突出显示的内容感到困惑，因为它确实在边缘区域显示 0
橙色表示没有边距（- 在那里）。并且窗口的实际图像中不显示边距。你能再描述一下为什么你认为有很大的余量吗？ @connexio 的回答显示了为什么你会得到一个滚动条，这是一个不同的问题。

标签： html css margin

【解决方案1】：

问题

您将宽度为 100% 的元素（默认为 div）从左侧移动 5%。这会导致父元素溢出。

解决方案 1

您需要相应地减小元素宽度。 width: calc(100% - 5%);

解决方案 2

改为使用margin-left 移动div（取决于祖先元素中的其他边距，这可能不起作用）：

#pfpbg {
    padding: 5px;
    width: 20%;
    max-width: 20%;
    height: auto;
    background-color: #1c1c1c;
    box-sizing: border-box;
    margin-left: 5%;
}

【讨论】：