边距仅影响宽度，而不影响顶部

Question

所以我想在div中放置一个div并为内部的div设置边距。所以应该看起来像这样

但是当前的边距仅影响宽度，而不影响高度。

#outer {
  background: red;
}

#inner {
  background: blue;
  margin: 40px;
}

<div id="outer">
  <div id="inner">
    foo
  </div>
</div>

边距增加了垂直空间，但外部div向下移动而不是拉伸。有人知道如何解决这个问题吗？

Answer 1

Margins collapse

如果没有边框，内边距，内联内容，高度或最小高度来将块的页边距顶部与底部边缘分开，则其顶部和底部页边距将崩溃。

因此，我们可以通过在外部元素上添加不可见的边框来解决此问题

#outer {
  background: red;
  border: 1px solid transparent;
}

#inner {
  background: blue;
  margin: 40px;
}

<div id="outer">
  <div id="inner">
    foo
  </div>
</div>

Answer 2

使用内部填充代替

：

#outer {
  background: red;
  padding: 40px;
}

#inner {
  background: blue;
}

<div id="outer">
  <div id="inner">
    foo
  </div>
</div>

Answer 3

您可以使用flexbox实现这一点：

#outer {
  background: red;
  width:400px;
  height:300px;
  display:flex;
  justify-content:center;
  align-items:center;
}

#inner {
  background: blue;
  margin: 40px;
  width:100px;
  height:100px;
  padding:20px;
}

<div id="outer">
  <div id="inner">
    foo
  </div>
</div>

Answer 4

您可以尝试这种方法，将内部div的显示设置为内联块，然后为其指定高度和宽度

#outer {
  background: red;
}

#inner {
  background: blue;
  margin: 20%;
  display:inline-block;
  width:60%;
  height:60vh;
}

<div id="outer">
  <div id="inner">
    foo
  </div>
</div>