如何使div从屏幕的右侧和左侧分开10％？

Question

我正在检查实现此功能的网站页面，必须通过添加左右边距来实现。但是，当我出于测试目的添加此功能时，我的div不在屏幕上。

例如

#test {
  background-color: red;
  height: 500px;
  width: 100%;
  margin-right: 10%;
  margin-left: 10%;
}

  <div id="test">



  </div>

从屏幕右侧移出，而不是从屏幕左右两侧移出10％。

如何实现此功能？

Answer 1

您可以为父div（在本例中为body）设置填充，以代替空白。

body {
  padding: 0 10%
}

#test {
  background-color: red;
  height: 500px;
  width: 100%;
}

<div id="test">
</div>

Answer 2

您可以尝试将width更改为 80％。

当您将margin-right/left分别设置为10％且宽度为100％时，这总计超过100％，因此超出了div的范围就会消失。

您可以尝试以下操作：

#test {
  background-color: red;
  height: 500px;
  width: 80%;
  margin-left: 10%;
}