具有"display:inline-flex"的元素；顶边距奇怪 [英] Element with "display: inline-flex" has a strange top margin

问题描述

我有两个div元素，都具有CSS属性display: inline-flex，因为我想将它们彼此并排放置.首先，div的位置似乎正确.

I have two div elements, both with the CSS property display: inline-flex, as I would like to position them beside each other. At first, the div's appear to be positioned properly.

.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元素彼此不对齐.

However, once I place some text inside of the nameOfUser div, it seems to create some strange top margin which makes the two div elements un-aligned from each other.

.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>

有人可以解释为什么会发生这种情况以及可能的解决方法吗?

Can someone please explain why this is happening and a possible solution?

推荐答案

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

With display: inline-flex you are dealing with inline-level elements.

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

This activates the vertical-align property, which applies only to inline-level and table-cell elements (source).

vertical-align的初始值为baseline.这意味着内联级别的元素可以垂直定位自身，以实现基线(文本)对齐.

The initial value of vertical-align is baseline. This means that inline-level elements position themselves vertically to achieve baseline (text) alignment.

基线

基线是大多数字母所在的行，而下字母在其下方延伸.

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

^{来源: Wikipedia.org}

这是您当前的代码结构，其中添加了文本:

This is your current code structure, with the text you added:

.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>

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

The second element shifts down so that it aligns with the current baseline of the first element.

现在将一些文本添加到第一个元素:

Now add some text to the first element:

.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>

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

Notice how the baselines shift to align.

由于h3具有默认的垂直边距，因此元素仍未完全对齐.如果您删除边距:

The elements still aren't squarely aligned because the h3 has default vertical margins. If you remove the margins:

.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的默认值.

1. Override the default value of vertical-align, with any other value.

.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.将父级设置为弹性容器.

这使您的元素成为弹性项目，因为

This makes your elements flex items, which de-activates vertical-align since flex items are block-level elements.

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

This method also lines up your elements in a row, because an initial setting of a flex container is 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>

这篇关于具有"display:inline-flex"的元素；顶边距奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！