为什么保证金在区块内不起作用？

Question

我有这段代码：

<div class='block'>
  <div class='container'></div>
</div>

.block {
  display: block;
  height: 100px;
  width: 100px;
  background: black;
}
.container {
  display: block;
  width: 30px;
  height: 30px;
  background: red;
  margin: 50px;
}

我无法理解为什么保证金在块内不起作用？

JsFiddle：https://jsfiddle.net/39yy7a0q/

Answer 1

尝试以下css。我已将位置添加到.container，并调整margin值，因为它应与父级宽度相关。 https://jsfiddle.net/39yy7a0q/4/

.block {
    display: block;
    height: 100px;
    width: 100px;
    background: black;
}

.container {
    display: block;
    position:absolute;
    width: 30px;
    height: 30px;
    background: red;
    margin: 35px;
}