为什么边距自动适用于左/右而不适用于上/下？ [复制]

Question

我一直想知道为什么我可以为左/右使用自动边距来水平居中 div，而不是垂直居中。在这里，我希望垂直居中：div-block-vertical-line，但 margin-top 和 margin-bottom 不起作用。

.div-block-container {
  width: 2%;
  height: 300px;
  background: red;
}

.div-block-vertical-line {
  display: block;
  width: 2px;
  height: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  background: blue;
}

<div class="div-block-container">
  <div class="div-block-vertical-line"></div>
</div>

Answer 1

如果你检查the MDN page：

自动

浏览器选择一个合适的边距来使用。例如，在 在某些情况下，此值可用于使元素居中。

因此，如果您使用 auto，您的浏览器将简单地选择 0 作为顶部/底部边距。

在the specification:

如果'margin-top'或'margin-bottom'是'auto'，它们的使用值为0

---

您要查找的内容在 flexbox model 中定义：

弹性项目的自动边距与自动边距的效果非常相似 在块流中：

在计算弹性底数和弹性长度时，自动边距 被视为 0。

在通过 justify-content 和 align-self 对齐之前，任何积极的 可用空间分配到该维度的自动边距。

溢出的框会忽略它们的自动边距并最终溢出 方向

.div-block-container {
  width: 2%;
  height: 300px;
  background: red;
  display:flex;
}

.div-block-vertical-line {
  display: block;
  width: 2px;
  height: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  background: blue;
}

<div class="div-block-container">
  <div class="div-block-vertical-line"></div>
</div>

所以为什么没有特别的原因。它是这样简单定义的，后来在引入 flexbox 时得到了增强。