html - 内有全屏图像的正文边框

Question

我想实现一个在浏览器和网站内容之间有白色边框/空格的网站。

在网站内部，有一个宽度和高度为 100% 的图像，它应该适应每个窗口大小。

像这样:

我可以用一个 div(包含图像)实现它并将其设置为:

position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;

但我不确定这种方法是否是最好的和最可靠的。我想听听您的想法和一些提示。

非常感谢

Answer 1

html, body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 20px solid #fff;
  box-sizing: border-box;
}

div{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ddd;
}

<div>Image</div>