html - 边距将 div 移到窗口外

Question

我使用以下 html 和 css:

<div class="foo"></div>

<style>
.foo {
    position: fixed;
    top: 0;
    left: 0;
    background-color: red;
    width: 100%;
    height: 100%;
    margin: 20px
}
</style>

jsfiddle

问题是 margin: 20px。它将整个 div 移动到窗口的右侧、底部和外部。我希望它能减少 div 的宽度，这样整个元素就占据窗口宽度的 100%。

不知何故我无法让它工作。我找到了解决方案，但所有解决方案都不使用固定位置。

Answer 1

这是一个可能的解决方案:

.foo {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
}

演示:https://jsfiddle.net/lmgonzalves/a6nbvmp4/1/

编辑:

没有 calc 但有 box-shadow 的另一种可能的解决方案:

.foo {
    box-shadow: 0 0 0 20px white inset;
}

演示:https://jsfiddle.net/lmgonzalves/a6nbvmp4/6/