带有“display：inline-flex”的元素有一个奇怪的上边距

Question

我有两个div 元素，都具有CSS 属性display: inline-flex，因为我想将它们放在一起。起初，div 的位置似乎正确。

.userImg{
  height: 3em;
  width: 3em;
  background: red;
  display: inline-flex;
}

.nameOfUser{
  display: inline-flex;
  height: 3em; 
  width: 10em; 
  background: blue;
}

<div class = "userImg"></div>
                    
<div class = "nameOfUser"></div>

但是，一旦我在 nameOfUser div 中放置了一些文本，它似乎会创建一些奇怪的上边距，这使得两个 div 元素彼此不对齐。

.userImg{
  height: 3em;
  width: 3em;
  background: red;
  display: inline-flex;
}

.nameOfUser{
  display: inline-flex;
  height: 3em; 
  width: 10em; 
  background: blue;
}

<div class = "userImg"></div>

<div class = "nameOfUser">
  <h3>Jaxon Crosmas</h3>
</div>

有人能解释一下为什么会发生这种情况以及可能的解决方案吗？

Answer 1

使用display: inline-flex，您正在处理内联级元素。

这将激活 vertical-align 属性，该属性仅适用于内联级和表格单元格元素 (source)。

vertical-align 的初始值为baseline。这意味着内联元素垂直定位以实现基线（文本）对齐。

baseline

基线是大多数字母所在的线，下降线在其下方。

^{来源：Wikipedia.org}

这是您当前的代码结构，以及您添加的文本：

.userImg {
  display: inline-flex;
  height: 3em;
  width: 3em;
  background: red;
}

.nameOfUser {
  display: inline-flex;
  height: 3em;
  width: 10em;
  background: aqua;
}

<div class="userImg"></div>
<div class="nameOfUser">
  <h3>Jaxon Crosmas</h3>
</div>

第二个元素向下移动，使其与第一个元素的当前基线对齐。

现在向第一个元素添加一些文本：

.userImg {
  display: inline-flex;
  height: 3em;
  width: 3em;
  background: red;
}

.nameOfUser {
  display: inline-flex;
  height: 3em;
  width: 10em;
  background: aqua;
}

<div class = "userImg">text</div>
<div class = "nameOfUser">
  <h3>Jaxon Crosmas</h3>
</div>

注意基线如何移动以对齐。

元素仍然没有完全对齐，因为h3 具有默认的垂直边距。如果删除边距：

.userImg {
  display: inline-flex;
  height: 3em;
  width: 3em;
  background: red;
}

.nameOfUser {
  display: inline-flex;
  height: 3em;
  width: 10em;
  background: aqua;
}

h3 { margin: 0; }

<div class = "userImg">text</div>
<div class = "nameOfUser">
  <h3>Jaxon Crosmas</h3>
</div>

---

这里有两个快速解决方案：

1.用任何其他值覆盖默认值vertical-align。

.userImg {
  display: inline-flex;
  height: 3em;
  width: 3em;
  background: red;
}

.nameOfUser {
  display: inline-flex;
  height: 3em;
  width: 10em;
  background: aqua;
}

div { vertical-align: top; }

<div class = "userImg"></div>
<div class = "nameOfUser">
  <h3>Jaxon Crosmas</h3>
</div>

2。将父级设为 flex 容器。

这会使您的元素成为 flex 项，这会取消激活 vertical-align，因为 flex items are block-level elements。

此方法还将您的元素排成一行，因为弹性容器的初始设置是flex-direction: row。

.userImg {
  height: 3em;
  width: 3em;
  background: red;
}

.nameOfUser {
  height: 3em;
  width: 10em;
  background: aqua;
}

body { display: flex; }

<div class = "userImg"></div>
<div class = "nameOfUser">
  <h3>Jaxon Crosmas</h3>
</div>