logo标签列表

内联弹性布局影响垂直对齐

htmlcssflexboxvertical-alignment
5
拥有一个inline元素并将其与嵌套的含有flex盒子的inline-flex元素放在一起会影响垂直对齐（忽略了顶部边距）。我找到的解决方案是在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>

将 vertical-alignment: top 和 display: inline-block 添加到标签中也可以使顶部边距生效，但仍不确定原因。https://codepen.io/GarthDB/pen/veBjvM - Garth Braithwaite
1个回答
4

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"），则标签会马上回到顶部。

我相信这全部都与基线的移动有关。再次提醒，只需使用 bottom、middle 或 top 覆盖 vertical-align 中的 baseline 值即可。

更多信息：

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接