绝对定位div侧面的空间

Question

我想在10px div的两边添加#in的空格，如下所示：

我有这段代码 - live demo ：

HTML

<div id="out">
  <div id="in"></div>
</div>

CSS

#out {
  width: 700px;
  height: 40px;
  background: lightblue;
  position: relative;
}

#in {
  position: absolute;
  width: 100%;
  height: 20px;
  top: 10px;
  background: white;
  margin: 0 10px;
}

Answer 1

否calc()，否box-sizing。由于元素位于absolute，因此您可以将其left / right偏移属性设置为10px，而不是指定明确的width和margin在它的一边：

<强> Example Here

#in {
  position: absolute;
  height: 20px;
  top: 10px;
  left: 10px;
  right: 10px;
  background: white;
}

Answer 2

您必须使用css calc规则才能计算100％宽度 - 边距大小：

#in {
  width: calc(100% - 20px);
}

希望这有帮助

Answer 3

解决方案1：只是填充

您可以大大简化CSS：

只需指定外部div的大小即可。添加box-sizing: border-box以防止填充影响div的宽度。

#out {
  width: 700px;
  padding: 10px;
  box-sizing: border-box;
  background: lightblue;
}

其他div无需定位。只要给它一个高度，它就会自动拉伸另一个div：

#in {
  height: 20px;
  background: white;
}

http://codepen.io/anon/pen/yICdF

解决方案2：使用边框

如果您的目标是获得蓝色边框，则根本不需要两个div。那个怎么样：

#out {
  width: 700px;
}
#in {
  height: 20px;
  border: 10px solid lightblue;
}

当然，在这种情况下你不需要两个div。只需完全删除#out并将width属性移动到#in。

http://codepen.io/anon/pen/icHjD