Question

inline旁边有一个inline-flex项，其中嵌套flex框与垂直对齐混淆（它忽略了上边距），我找到的一个解决方案是放置一个{ {1}}项目中的{1}}，但我不确定为什么会修复它。

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

＆＃13;

inline-flex

＆＃13;

::before

＆＃13;

Answer 1

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

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

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

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

您可以使用其他值覆盖此行为，例如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伪元素如何“修复”问题，这里有两条评论/意见：

添加::before伪元素不会获得最高保证金。如果删除该边距，您将看到标签仍与伪底部对齐。
我认为伪 - 当为空时 - 将标签向下移动，因为它为容器建立了新的基线。但是，如果您向其添加任何内容（我刚试过content: "x"），标签会立即转回到顶部。

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

更多信息：

Inline-Flex混合使用垂直对齐

1 个答案: