html - "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

The baseline is the line upon which most letters sit and below which descenders extend.

^{Source: 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 元素，自 flex items are block-level elements 起取消激活 vertical-align .

此方法还将您的元素排成一行，因为 flex 容器的初始设置是 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>