Inline-Flex 与垂直对齐混乱

Posted 2023-03-05

【中文标题】Inline-Flex 与垂直对齐混乱

【英文标题】：Inline-Flex messes with vertical align

【发布时间】：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

【参考方案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 值。

更多信息：

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