Inline-Flex 与垂直对齐混乱答案

【问题标题】：Inline-Flex messes with vertical alignInline-Flex 与垂直对齐混乱
【发布时间】：2018-02-20 05:27:29
【问题描述】：

在带有嵌套flex 框的inline-flex 旁边有一个inline 项目与垂直对齐（它忽略了上边距）混淆，我发现的一个解决方案是在@987654326 中放置一个::before @item，但我不确定为什么会修复它。

第一个忽略标签上的上边距，上边距适用于第二个，因为::before。

label {
  margin: 20px 5px 0 0;
}

.input-container {
  display: inline-flex;
}

.with-before::before {
  content: '';
}

.buttons {
  display: flex;
  flex-direction: column;
}

<div>
  <label>Top margin ignored:</label>
  <div class="input-container">
    <div class="buttons">
      <button>&lt;</button>
      <button>&gt;</button>
    </div>
    <input type="text"/>
  </div>
</div>
<br/>
<div>
  <label>Top margin works:</label>
  <div class="input-container with-before">
    <div class="buttons">
      <button>&lt;</button>
      <button>&gt;</button>
    </div>
    <input type="text"/>
  </div>
</div>

【问题讨论】：

将vertical-alignment: top 和display: inline-block 添加到标签也可以使上边距起作用，但仍然不知道为什么。 codepen.io/GarthDB/pen/veBjvM

标签： html css flexbox vertical-alignment

【解决方案1】：

label 元素默认是内联级别的。因此，它会忽略垂直边距（以及填充和高度）。

8.3 Margin properties: margin-top, margin-right, margin-bottom, margin-left, and margin

[margin-top 和margin-bottom] 对非替换无效内联元素。

但是，内联级元素受vertical-align 属性的约束，默认值为baseline，这意味着它们根据其内联内容（例如图像、输入或文本）垂直对齐。

您可以使用另一个值覆盖此行为，例如 bottom。

label {
  margin: 20px 5px 0 0;
  vertical-align: bottom;
}

.input-container {
  display: inline-flex;
}

button {
  display: flex;
  flex-direction: column;
}

<div>
  <label>Top margin ignored:</label>
  <div class="input-container">
    <div class="buttons">
      <button>&lt;</button>
      <button>&gt;</button>
    </div>
    <input type="text" />
  </div>
</div>
<br/>
<div>
  <label>Top margin works:</label>
  <div class="input-container with-before">
    <div class="buttons">
      <button>&lt;</button>
      <button>&gt;</button>
    </div>
    <input type="text" />
  </div>
</div>

至于::before 伪元素如何“修复”问题，这里有两个cmets / 观察：

添加::before 伪元素不会使上边距起作用。如果你去掉那个边距，你会看到标签仍然与底部对齐，并带有伪。
我认为伪 - 当为空时 - 将标签向下移动，因为它为容器建立了新的基线。但是，如果您向其中添加任何内容（我刚刚尝试过content: "x"），标签会右移回到顶部。

我很确定这一切都与基线的变化有关。同样，只需用bottom、middle 或top 覆盖vertical-align 中的baseline 值。

更多信息：

【讨论】：