html - Inline-Flex 与垂直对齐混淆

Question

在带有嵌套 flex 框的 inline-flex 旁边放置一个 inline 元素会扰乱垂直对齐(它会忽略上边距)，我找到的一个解决方案是在 inline-flex 项中放置一个 ::before，但我不太确定为什么会修复它。

第一个忽略标签上的上边距，上边距作用于第二个，因为 ::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>

Answer 1

默认情况下，label 元素是行内级别的。因此，它会忽略垂直边距(以及填充和高度)。

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

[margin-top and margin-bottom] have no effect on non-replaced inline elements.

但是，行内元素受制于 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 伪元素如何“修复”这个问题，这里有两条评论/观察:

1. 添加 ::before 伪元素不会使上边距起作用。如果删除该边距，您会看到标签仍然与伪对齐的底部。

2. 我认为伪 - 当为空时 - 将标签向下移动，因为它为容器建立了新的基线。但是，如果您向其中添加任何内容(我刚刚尝试了 content: "x")，标签会立即移回顶部。

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

更多信息:

• Why is my textarea higher up than its neighbor?
• Vertical align not working on div