带有"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属性,该属性仅适用于内联级和表格单元格(源).

初始值vertical-align是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.使父级成为弹性容器.

这会使您的元素变为项目,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>