右侧未知边距

Question

我的 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 重置，但它没有解决问题，保证金仍然存在。

Answer 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%;
}

右侧未知边距

Unknown margin to the right

html

css

margin

问题

解决方案 1

解决方案 2