Inline-Flex 与垂直对齐相混淆

Question

在带有嵌套框的inline项目旁边放置一个项目会扰乱垂直对齐（它忽略顶部边距），我发现的一个解决方案是将inline-flexflex::beforeinline-flex项目中，但我不太确定为什么会修复它。

第一个忽略标签上的上边距，上边距适用于第二个，因为::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-top、margin-right、margin-bottom、margin-left、 和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伪元素如何“修复”问题，这里有两个评论/观察：

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

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

我很确定这都与基线的变化有关。同样，只需用,或覆盖baseline中的值即可。vertical-alignbottommiddletop

更多信息：

• 为什么我的文本区域比它的邻居高？
• 垂直对齐不适用于 div