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

Posted 2023-03-06

【中文标题】带有“display：inline-flex”的元素有一个奇怪的上边距

【英文标题】：Element with "display: inline-flex" has a strange top margin

【发布时间】：2018-06-15 11:17:50

【问题描述】：

我有两个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>

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

【问题讨论】：

Difference between display:inline-flex and display:flex的可能重复

display: inline-flex 不会使弹性项目内联显示。它使 flex 容器内联显示。

设置垂直对齐：顶部；

^ 谢谢，解决了。

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

【讨论】：

写得很漂亮的答案:)

很好的答案。但我认为有一个错误。您提到flex items are block-level elements 和您链接的规范字面意思是：However, flex items themselves are flex-level boxes, not block-level boxes.（在该页面该部分的“示例”部分下方）