如何在固定外容器内的固定内容器中添加边距？

Question

我想将保证金（10px）添加到.inner-container（蓝色）960px固定宽度，也在.outer-container内360px固定宽度）

为了使其可滚动，我将overflow: scroll设置为。outer-container 为了向内部容器添加边距，我将margin: 10px;设置为.inner-container。

问题是.inner-container右侧没有边距。

.outer-container {
  width: 360px;
  height: 500px;
  background: #555;
  overflow: scroll;
}

.container-inner {
  width: 960px;
  height: 300px;
  background-color: #0D47A1;
  margin: 10px;
}

<div class="outer-container">
  <div class="container-inner"></div>
</div>

Answer 1

尝试将填充物提供给外部容器，而不是为内部容器提供边距。

.outer-container {
  width: 360px;
  height: 500px;
  background: #555;
  overflow: scroll;
  padding: 10px;
}

.container-inner {
  width: 960px;
  height: 300px;
  background-color: #0D47A1;
  display:block
}

Answer 2

您需要在父元素div元素之间再进行一次换行。

考虑以下标记：

<div class="outer-container">
  <div class="middle-container">
    <div class="inner-container"></div>
  </div>
</div>

在此中间元素上添加padding + width：

.middle-container {
  padding: 10px;
  width: 960px;
}

输出图片：

工作演示：

＆＃13;

＆＃13;

* {box-sizing: border-box;}

.outer-container {
  width: 360px;
  height: 500px;
  background: #555;
  overflow: scroll;
}

.middle-container {
  padding: 10px;
  width: 960px;
}

.inner-container {
  background-color: #0D47A1;
  height: 300px;
}

＆＃13;

<div class="outer-container">
  <div class="middle-container">
    <div class="inner-container"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以通过添加一个div（宽度为980px）来包装内部容器，因此应用的边距将起作用：

＆＃13;

＆＃13;

.outer-container {
 width:360px;
  height: 500px;
  background: #555;
  overflow-x: scroll;
}
.inner-wrap {
  width:980px;
}
.container-inner {
  width: 960px;
  height: 300px;
  background-color: #0D47A1;
  margin:10px;

}

＆＃13;

<div class="outer-container">
<div class="inner-wrap">
  <div class="container-inner"></div>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;